фоновое изображение не растягивается на всю ширину страницы - PullRequest
Новая
       15

фоновое изображение не растягивается на всю ширину страницы

7 голосов
/ 14 марта 2009

На на этой странице , у меня 2-тоновый фон. Структура страницы: 

<body>
  <div id="upbg"/>
  <div id="container"/>
</body

Этот фон достигается путем добавления темного фонового изображения в upbg и более светлого фонового изображения на теле. CSS для upbg: 

#upbg {
  background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0;
  height: 275px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Если вы сделаете окно браузера очень узким, чтобы появились полосы прокрутки, тогда, если вы прокрутите вправо, вы заметите, что фоновое изображение upbg не занимает всю ширину страницы.

Я предполагаю, что это потому, что «ширина: 100%» означает ширину окна браузера, а не всю ширину страницы, есть ли способ исправить это?

Спасибо, Дон

Ответы [ 2 ]

9 голосов
/ 14 марта 2009

Я предполагаю, что это потому, что «ширина: 100%» означает ширину окно браузера, а не весь ширина страницы, есть ли способ исправить это?

100% означает, что он будет таким же широким, как родительский элемент, относительно которого он расположен (в данном случае body, ширина которого будет основана на ширине его родительского элемента, html). Который будет таким же широким, как окно браузера, если не указано иное.

Проблема в том, что у вас есть другой дочерний элемент body, который может быть шире body: и #container, и #footer оформлены так, что они всегда будут иметь ширину не менее 1026px. Это не расширяет их родительские элементы, так как мы уже установили, что они будут такими же широкими, как окно браузера; вместо этого они переполняют своих родителей. Ответ по умолчанию - отображать полосы прокрутки, чтобы вы могли прокручивать и просматривать переполненный контент; если вы добавите стиль overflow:hidden в html или body, вы обнаружите, что ваш контент и нижний колонтитул обрезаны до размера окна браузера, и полосы прокрутки не отображаются.

Для этого есть несколько простых решений:

  1. Оберните #content и #footer в #upbg вместо того, чтобы предшествовать им вместе с ним. Затем удалите существующие стили и стилизуйте их следующим образом: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; Это выполняет две вещи: вы больше не указываете ширину для #upbg, таким образом позволяя ей стать достаточно широкой, чтобы охватить ее новых дочерних элементов, и это позволяет вам избавьтесь от множества ненужных на данный момент стилей (вы также захотите очистить отступы, которые вы установили для body, а также некоторые стили для #content). С другой стороны,
  2. Избавьтесь от минимальной ширины на #content и #footer, чтобы они не переполнялись.
1 голос
/ 14 марта 2009

просто вы можете использовать абсолютно позиционированное изображение с шириной и высотой, установленными на 100%, обернутое тегом body, если вы можете использовать целый фон. установите z-индекс других элементов выше, чем фоновое изображение. 


 <head>
  ...
  <style>
    .virtualBg{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  </style>
 </head>
 <body>
   <img src="path/to/bg.jpg" class="virtualBg" />
   ...
 </body>

но я рекомендую использовать вертикально обрезанное изображение, содержащее оба цветовых тона, а затем повторить-x фон для элемента body.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...