Мне интересно, знает ли кто-нибудь, как добиться следующего - взгляните на http://www.dspts.si
Первая 1/3 экрана имеет пустой фон, и далее узор должен повторяться. Я сделал это прямо сейчас, создав очень длинный узор png и установил для него смещение 300 и повторить x. Однако я не доволен этим решением, потому что оно сломается, если страницы когда-либо станут длиннее, чем фоновое изображение png.
Спасибо за любые предложения!
Поместите повторяющийся узор в качестве фона для элемента html, затем белое изображение размером 1px * 300 пикселей в качестве фонового изображения для элемента body, и все готово.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
Для этого необязательно использовать теги html и body, но это самый простой способ и не требует новой разметки.
Вы можете указать несколько фонов. См. Могу ли я использовать несколько фоновых изображений с помощью CSS?. Упомянутые там техники:
<div> контейнер или неправильно используйте для него тег <html>. <body> и один для <html>.Да, укажите фоновое изображение как обычно, но установите background-position следующим образом:
background-position:0 300px;
Это заставит фоновое изображение начинать с 0 пикселей слева и 300 пикселей сверху.
Не забывайте, что вы можете использовать FireBug с FireFox, чтобы легко диагностировать методы на веб-сайтах.
