Как добавить два background'a

Maksim-C · 22.04.2010, 15:30

в css в body
background: url(img/bg.jpg) 0 100% repeat-x #f5f5f5;
Так отображается внизу как и надо.
А как добавить еще один вверху другой.
пробовал прописать в html теге
background: url(img/bg2.jpg) 100% 0 repeat-x #f5f5f5; не проходит...

Как сделать правильно?

Niemans · 22.04.2010, 15:34

Код HTML:

<div class="top">
    <div class="bottom">
    	content
    </div>
</div>

top задаете верхний фон

Код HTML:

.top {background: url(img/bg.jpg) 0 top repeat-x #f5f5f5;}

bottom задаете нижний фон

Код HTML:

.bottom {background: url(img/bg.jpg) 0 bottom repeat-x #f5f5f5;}

Maksim-C · 22.04.2010, 15:42

А можно это решить другим путем? Так как я использую смешанную верстку (table vs div). Получается нужно все содержимое которое в index файле междй тегами body заключить в код представленный выше на место content ??? и потом прописать в css

Код HTML:

.top задаете верхний фон
.top {background: url(img/bg.jpg) 0 top repeat-x #f5f5f5;}
.bottom задаете нижний фон
.bottom {background: url(img/bg.jpg) 0 bottom repeat-x #f5f5f5;}

?
А не пострадает от этого у меня верстка?

Niemans · 22.04.2010, 15:57

Цитата:

Получается нужно все содержимое которое в index файле междй тегами body заключить в код представленный выше на место content ???

Да. Суть в том что есть главный контейнер с фоном вверху, внутри него контейнер с фоном внизу, а внутри всего этого контент.

Цитата:

А не пострадает от этого у меня верстка?

Не должна.

Maksim-C · 22.04.2010, 16:19

Верстка не пострадала, вот только отображается нижний background а верхний почему-то не отображается...

Niemans · 22.04.2010, 16:21

Сорри. Копировал ваш код не глядя. Для body задайте фон #f5f5f5, а в стилях уберите.

Maksim-C · 22.04.2010, 16:25

Ага , все заработало !!!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Canvas background - как добавить к фону картинку?	Peter Soloviev	HTML, CSS, JavaScript	0	06.09.2013 14:55
Свойство background	vadim_32	HTML, CSS, JavaScript	0	19.03.2012 22:48
Подскажите с background	Серый*	HTML, CSS, JavaScript	1	14.06.2010 16:51
сокращенный background в IE8	Levhik	HTML, CSS, JavaScript	13	03.03.2010 01:20
background и img в таблице	BleSSeD	HTML, CSS, JavaScript	3	19.05.2008 16:41

22.04.2010, 15:30	#1
Maksim-C	в css в body background: url(img/bg.jpg) 0 100% repeat-x #f5f5f5; Так отображается внизу как и надо. А как добавить еще один вверху другой. пробовал прописать в html теге background: url(img/bg2.jpg) 100% 0 repeat-x #f5f5f5; не проходит... Как сделать правильно?

22.04.2010, 15:34	#2
Niemans	Код HTML: <div class="top"> <div class="bottom"> content </div> </div> top задаете верхний фон Код HTML: .top {background: url(img/bg.jpg) 0 top repeat-x #f5f5f5;} bottom задаете нижний фон Код HTML: .bottom {background: url(img/bg.jpg) 0 bottom repeat-x #f5f5f5;}

22.04.2010, 15:42	#3
Maksim-C	А можно это решить другим путем? Так как я использую смешанную верстку (table vs div). Получается нужно все содержимое которое в index файле междй тегами body заключить в код представленный выше на место content ??? и потом прописать в css Код HTML: .top задаете верхний фон .top {background: url(img/bg.jpg) 0 top repeat-x #f5f5f5;} .bottom задаете нижний фон .bottom {background: url(img/bg.jpg) 0 bottom repeat-x #f5f5f5;} ? А не пострадает от этого у меня верстка?

22.04.2010, 16:19	#5
Maksim-C	Верстка не пострадала, вот только отображается нижний background а верхний почему-то не отображается...

22.04.2010, 16:21	#6
Niemans	Сорри. Копировал ваш код не глядя. Для body задайте фон #f5f5f5, а в стилях уберите.

22.04.2010, 16:25	#7
Maksim-C	Ага , все заработало !!!