css фон повторяется начиная с 300px - PullRequest
Новая
       17

css фон повторяется начиная с 300px

1 голос
/ 04 декабря 2009

Мне интересно, если кто-нибудь знает, как добиться следующего - взгляните на http://www.dspts.si

Первая 1/3 экрана имеет пустой фон, и с этого момента должен повторяться шаблон. Я сделал это прямо сейчас, создав очень длинный паттерн png и установив его на смещение 300 и repeat-x. Тем не менее, я не доволен этим решением, потому что оно сломается, если страницы будут длиннее, чем фоновое изображение png.

Спасибо за любые предложения!

Ответы [ 3 ]

3 голосов
/ 04 декабря 2009

Вы можете указать несколько фонов. См. Можно ли использовать несколько фоновых изображений с помощью CSS? . Методы, упомянутые здесь:

  • Поместите всю страницу в другой контейнер <div> или используйте для него тег <html>.
    Это означает, что вы указываете фон для <body> и один для <html>.
  • Используйте CSS3, который поддерживает несколько фоновых изображений. Это еще не поддерживается всеми распространенными браузерами.
3 голосов
/ 04 декабря 2009

Поместите повторяющийся узор в качестве фона для элемента html, затем белое изображение 1px * 300px в качестве фона для элемента body, и все готово. 

html, body {
    height: 100%;
}

html {
    background: url(dotted.png);
}

body {
    background: url(white_1x300.png) 0 0 repeat-x;
}

Для этого вам не нужно использовать теги html и body, но это самый простой способ и не требует никакой новой разметки.

0 голосов
/ 04 декабря 2009

Да, укажите фоновое изображение как обычное, но установите background-position следующим образом: 

background-position:0 300px;

Это заставит фоновое изображение начинаться с 0 пикселей слева и 300 пикселей сверху.

Давайте не будем забывать, что вы можете использовать FireBug с FireFox для простой диагностики методов на сайтах.

...