Фон строки на всю ширину экрана. Без скрола. 
Autor: Роман Паксашвили
Visitado 2908,
Followers 1,
Compartido 0
Как сделать фон строки по всей ширине экрана ? Не задать фон контента картинкой а чтоб у каждой строки сделать фон шириной в 1920px но чтоб не было скроллинга. Как вот здесь :http://about.general-idea.com/
Publicado en
В свойствах страницы, на которой это нужно сделать, в закладке "Эксперт" перед закрывающим тегом HEAD поставьте:
<style>
.fon {
background: #e2e2e2;
position: absolute;
top: 500px;
width: 100%;
height: 100px;
z-index: 0;
}
</style>
А перед закрывающимся тегом BODY поставьте код:
<div class="fon"></div>
Где "top: 500px" - это отступ от верха окна браузера (ставьте свое значение), "height: 100px" - ширина фона, background: #e2e2e2 - цвет фона, "z-index: 1" - позиция фона относительно других объектов на странице (можно делать как отрицательное значение, например, z-index: -10, так и положительное, другими словами перемещать на передний или на задний план).
Autor
Да, но это не совсем то что мне нужно. На скринах то что получилось и что хотелось сделать.
Я ж написал какое значение за что отвечает. Нужно шире полосу если, то увеличивайте значение и отступы. Там все просто. Или что-то я не допонимаю и нужно другое?..
Autor
К примеру у меня в блоке контент есть три(в каждой строке минимум 2 ячейки) строки.
Ширина блока контент - 970px. Мне необходимо каждой строке задать разный цвет фона по всей ширине экрана. То что Вы написали работает, но получается я могу задать фон одного цвета одной строке а мне нужно так:
блок 1 - зеленый
блок 2 - красный
блок 3 - фоном картинка (тоже на всю ширину экрана)
Лендинг пытаюсь сделать.
Здесь найдете ответ: http://forum.websitexs.ru/thread-2885-1-2.html
Роман, а что мешает сделать Вам 3 разных полосы??? Сделайте 3 разных контейнера с разными id и разными стилям. Но с картинкой сложнее, нужно указать ее явный размер по высоте и потом выставлять свойствами значения margin-left, чтобы она центрировалась по горизонтали при разном разрешении экрана (здесь уже думайте сами, подбирайте).
<div class="fon"></div>
<div class="fon1"></div>
<div class="fon2"></div>
<style>
.fon {
background: #00FF00;
position: absolute;
top: 500px;
width: 100%;
height: 100px;
z-index: 0;
}
</style>
<style>
.fon1 {
background: #FF0000;
position: absolute;
top: 700px;
width: 100%;
height: 100px;
z-index: 0;
}
</style>
<style>
.fon2 {
background-image:url('указываем путь к картинки на сервере');
background-repeat:no-repeat;
position: absolute;
top: 900px;
width: 100%;
height: 100px;
z-index: 0;
}
</style>