2014-02-19 1 views
0

Я пытаюсь сделать свой сайт с 2-фонов, первого фона в верхней и второй в сноске, в настоящее время им с помощью код ниже:2 фоны, 1 сверху и 1 в экране или колонтитулу

body { 
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x; 
} 

этот CSS работает хорошо, когда страница больше, чем высота экрана, но у меня есть некоторые из страниц с примерно высотой 500px, и в этих случаях bgfooter не показаны в сноске,

я хотел бы добавить что-то вроде этого,

body { 
background: url(images/bgfooter.png) bottom center repeat-x, url(images/bgheader.png) top center repeat-x; 
min-width: screensize; 
} 

любой вариант?

+1

Это кажется невероятно Hacky. Почему бы вам просто не разделить свой сайт на контент и нижний колонтитул с отдельными разделителями и добавить фон для каждого отдельно? – Josiah

+0

попытался, но после того, как сделал абзац нижнего колонтитула абсолютным, некоторое содержимое страницы скрыто – Elona

+0

Хорошо, это означает, что вы делаете что-то неправильно. ;) Попробуйте показать, какой код вы пробовали для этого. – Josiah

ответ

0

Установите фоновое изображение img на тело, а затем установите отдельный фон img для нижнего колонтитула.

body { 
background: url(images/bgheader.png) top center repeat-x; 
} 

#footer { 
background: url(images/bgfooter.png) bottom center repeat-x; 
} 

Ваш HTML

<html> 
<body> 

<div id="footer"> 
</div> <!-- END OF FOOTER DIV --> 

</body> 
</html> 

Теперь, когда вы установили фон IMG в колонтитул Вы можете настроить любые другие атрибуты колонтитула и тела по своему усмотрению.

1

Вы можете установить Dubble фона в CSS3

background: 
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */ 
url(thingy.png) 10px 10px no-repeat, /*   like z-index: 3; */ 
url(Paper-4.png);      /* On bottom, like z-index: 1; */ 
+0

Im, используя тот же код, но только в 1 строке – Elona

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