Блог

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

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

#html #css #frontend

#HTML #css #интерфейс

Вопрос:

У меня есть раздел содержимого, расположенный по центру страницы:

 <div id="container>
</div>

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

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

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

Ответ №1:

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

Комментарии:

1. проблема в том, что я хочу, чтобы содержимое контейнера оставалось в центре :/

Ответ №2:

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

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

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

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

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