фон css, повторяющийся с 300 пикселей и далее

StackOverflow https://stackoverflow.com/questions/1845714

  •  12-09-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

Поместите повторяющийся узор в качестве фона для html элемент, затем белое изображение размером 1 × 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>.
  • Используйте CSS3, который поддерживает несколько фоновых изображений.Это пока поддерживается не всеми распространенными браузерами.

Да, укажите ваше фоновое изображение как обычное, но установите background-position вот так:

background-position:0 300px;

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top