Фоновое изображение, не распространяющееся на нижнюю часть страницы

Я работаю над страницей на моем сайте, которая содержит довольно много данных, поэтому страница очень длинная. Страница состоит из фонового изображения для основного тела и контейнера с фоновым изображением, оба из которых выполняют всю длину страницы (не верхнее или нижнее поля, а также верхнее или нижнее дополнение). Я сталкиваюсь с проблемой с фоновыми изображениями: они не распространяются на нижнюю часть страницы при определенных разрешениях. Экран, который я кодирую, имеет ширину 1680 пикселей, и в настоящее время оба фоновых изображения простираются вплоть до дна. Однако, когда я просматриваю страницу на экране с меньшим разрешением (например, шириной 1280 пикселей), фоновые изображения не распространяются вплоть до нижней.Фоновое изображение, не распространяющееся на нижнюю часть страницы

Я использую XHTML 1.0 Strict.

Вот соответствующий HTML-код:

<body class="ice01"> 
<div id="maincontent2"> 
<!-- content --> 
</div> 
</body>

Вот соответствующий код CSS:

.ice01 { 
background-image: url('../images/iceBackground04.jpg') ; 
    margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;} 


#maincontent { 
width: 88%; 
background-image: url(../Images/BlueParchment.jpg); 
margin: 0px auto; 
padding: 0px 32px 0px 32px;}

Эта проблема также представляет себя, если я изменить размер моего окна. Кроме того, если я вынимаю фоновые изображения и заменяю их цветом, эта проблема исчезает. Я попытался использовать сокращенное сокращение (background: #0000ff url('../images/iceBackground04.jpg') repeat 0 0;), и это не устраняет проблему.

Я попытался использовать min-height: 100%; на обоих из них, и это не устраняет проблему. Я также проверил веб-страницу через W3C, и все это проверяется, поэтому я не думаю, что это вызвано отсутствующими/незакрытыми тегами.

Вот URL для данной страницы: http://icengale.com/icenDeities-Mainen.html

Я использую «сбросить» файл CSS, но удаление, не решает проблему, так что я не думаю, что это вызывает проблемы.

Любая помощь очень ценится, спасибо!

источник

2013-07-03 Mock26

Вы попробовали атрибут repeat-y? –

отлично работает в Firefox – JanR

Работает отлично! –

Попробуйте использовать следующий css, если он работает.

.ice01 { 
background:url(../images/iceBackground04.jpg) repeat-x 0 0; 
margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;} 


#maincontent { 
width: 88%; 
background:url(../images/BlueParchment.jpg) repeat-x 0 0; 
margin: 0px auto; 
padding: 0px 32px 0px 32px;}

источник

2013-07-03 04:56:27

Это не сработало, Swarnamayee Mallia. Это вдохновило меня на небольшое тестирование, и фоновое изображение останавливается примерно на 32 750 пикселей (я добавил границу к фоновому изображению и подсчитал количество повторений). И это только останавливается в Firefox. Он обычно отображается в IE8. Я ничего не тестировал. – Mock26

Фоновое изображение, не распространяющееся на нижнюю часть страницы

ответ

Смежные вопросы