Как бы я мог сделать такой фон: у меня есть изображение 150 пикселей x 150 пикселей, которое я хотел бы повторить по всему фону. Но самая верхняя строка (верхнее 150 пикселей) другого изображения должна повторяться только по оси x. И то же самое на нижней стороне, в нижней строке третье изображение должно повторяться по оси x. Как мне это сделать? Спасибо!Несколько фонов с позиционированием CSS
Попробуйте это!
body {
bacground: url(topbackground.png) repeat-x,
url(bottombackground.png) bottom fixed repeat-x,
url(centerbackground.png);
}
Также приведена ссылка на пример с кучей фотографий котенка!
Для этого вы можете создать 3 разных div, чтобы вы могли повторять каждый фон в отдельных частях.
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
<div class="two" id="one">
</div>
#one{
background-image:url('http://www.shrtclothing.com/images/share/facebookthumb.jpeg');
background-image:repeat;
width:1000px;
height:150px;
}
или просто сделать 2 дивы, один для верхней и один для нижней части. Вы можете иметь среднюю часть фона 'body'. –
спасибо ... как сделать нижний всегда плавать на дно? – AlesSvetina
есть пара вещей, которые вы можете сделать. Либо вы можете использовать фон x, y как координаты, либо вы можете сделать положение: абсолютное; нижний: 0px; , – Keith
Это, мой друг, прекрасное решение. Спасибо! – AlesSvetina
До сих пор я не знал, что вы можете назначить более одного фона для одного слоя. Вы знаете, как это поддерживается IE8? Я мог только попробовать IE 9 - кажется, работает – cljk
@cljk [Это не похоже, что IE 8 поддерживает то, что я делаю] (http://stackoverflow.com/a/5045357), но [это] (http : //nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/) выглядит перспективным для IE8. Однако я этого не пробовал. –