Центральный div для контента с графическим фоновым изображением, которое достигает от дальнего края контейнера до левого края экрана?

Question

У меня есть содержимое div, центрированное на странице:

<div id="container>
</div>

#container {
margin: 0 auto;
width: 960px
}

Я хочу, чтобы фоновое изображение с градиентом в 1 пиксель в высоту и 1000 пикселей в ширину проходило от правого края #container до левого края веб-браузера. Я сделал градиент таким образом, чтобы цвет края был сплошным, поэтому я могу, надеюсь, просто указать сплошной цвет в качестве фона, чтобы в случае, если браузер стал слишком широким, он не выглядел чопорным.

есть идеи как это сделать? спасибо!

Answer 1

Я думаю, вы имеете в виду что-то вроде этого .

И чтобы растянуть левый цвет по всей высоте окна, замените absolute на fixed.

Но гораздо проще сделать фоновое изображение размером 3000 пикселей (и только центр 960 пикселей, содержащий градиент, , как этот ) и прикрепить его к фону следующим образом:

body {
    background: url('/images/gradient3000x1.png') repeat-y center;
}

Тогда вам не нужно беспокоиться о высоте вашего контента.

Answer 2

Если я правильно следую за вами, решение требует от вас матового градиентного фонового изображения и его центрирования по горизонтали внутри соответствующего элемента (будь то #container или его непосредственный родительский элемент).Исследование значений padding для #container также может дать хорошие результаты.