Сделать, чтобы фон повторялся только по вертикали - «Фоновая картинка»

• Если человек ощущает свое участие в жизни общества, он создает не только материальные ценности для людей - он создает и самого себя. Из работы, в которой ярко выражен дух гражданственности, начинается истинное самовоспитание.

Афоризмы
• Поистине, подобно солнцу, люблю я жизнь и все глубокие моря. И вот что называю я познанием: чтобы все глубокое поднялось на высоту мою!

Афоризмы
• - «Оставайтесь голодными. Оставайтесь безрассудными». И я всегда желал себе этого. И теперь, когда вы заканчиваете институт и начинаете заново, я желаю этого вам.

Афоризмы
• Воспитание личности - это воспитание такого стойкого морального начала, благодаря которому человек сам становится источником благотворного влияния на других, сам воспитывается и в процессе самовоспитания еще более утверждает в себе собственное моральное начало.

Афоризмы

Сегодня

• Кто много знает, с того много и спрашивается.

• Не учись до старости, а учись до смерти.

• Без терпенья нет ученья.

• Знание лучше богатства.

• Учи показом, а не рассказом.

• Не для знания, а для экзамена.
• Знание — сила.

• Без муки нет и науки.

• Всему учен, только не изловчен.

• Велико ли перо, а большие книги пишет.

• Перо пишет, а ум водит.

• Не бойся, когда не знаешь: страшно, когда знать не хочется.
• Учение — путь к умению.

• Много ученых, мало смышленных.

• Наука учит только умного.

• Учи других — и сам поймешь.

• На все руки, кроме науки.

• Наукой люди кормятся.
• Писать — не языком чесать.

• От учителя наука.

• И медведя плясать учат.

• Не пером пишут — умом.

• Мудрым ни кто не родился, а научился.

• Корень учения горек, да плод его сладок.

Меню

Наши новости

Видео уроки

19 апрель 2023, 08:23

Причины популярности камеры GoPro и особенности современной техники

SpaceX отключит от Starlink нелегальных абонентов - «Новости сети»

Наш опрос

Помогли мы вам

Наши новости

24 март 2016, 17:40

Базовый синтаксис CSS

Разное и интересное

19 апрель 2023, 08:23

Причины популярности камеры GoPro и особенности современной техники

15 март 2020, 12:20

? ССЫЛКА НА Maestro - «Видео уроки - CSS»

27-03-2016, 11:27

Сделать, чтобы фон повторялся только по вертикали - «Фоновая картинка»

Рейтинг:

Категория: Самоучитель CSS / Изображения

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Добавить фоновую картинку на веб-страницу, чтобы она повторялась только по вертикали.

Решение

Используйте свойство background со значением repeat-y для селектора body.

Описание

Повторение фона обычно требуется для создания декоративных линий или градиентов, привязанных к высоте элемента или окна веб-страницы. В таких случаях повторение фона по вертикали обеспечивает цельную картинку независимо от размеров элементов. Только вначале следует побеспокоиться о том, чтобы фоновое изображение повторялось без стыков.

Предварительно следует подготовить фоновый рисунок, который должен удовлетворять ряду условий:

занимать по высоте не меньше 20–30 пикселов;
при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пиксела), то при отображении фона эффект его появления будет заметен невооруженным глазом. Увеличение высоты позволяет замостить фон элемента быстро и неприметно.

В качестве образца фона возьмем узор, показанный на рис. 1.

Рис. 1. Фоновая картинка

За повторение фона отвечает стилевое свойство background-repeat, его значение repeat-y как раз и обеспечивает нужное нам повторение по вертикали. Аналогично можно воспользоваться универсальным свойством background, которое одновременно задаёт путь к графическому файлу, повторение фона, а также его расположение относительно элемента (пример 1).

Пример 1. Повторение фона

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>  
  <meta charset="utf-8">
  <title>Повторение фона по вертикали</title>
  <style>
   body {
    padding-left: 100px; /* Поле слева */
    background: 
     url(images/pattern-left.png) repeat-y; /* Путь к графическому файлу и
                                            повторение фона по вертикали */ 
    }
  </style>
 </head>
 <body>
   <p>Человек должен уметь иногда посмеяться над собой, иначе 
   он сойдёт с ума. Об этом, к сожалению, знают немногие, 
   поэтому в мире так  много сумасшедших.</p>
   <p>Рафаэль Сабатини</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Вид фона, повторяющегося по вертикали

В данном примере фон задаётся на веб-странице за счёт добавления свойства background к селектору body, при этом повторение фона по вертикали обеспечивается его значением repeat-y. По умолчанию фон всегда начинается с левого верхнего угла, поэтому в нашем случае положение фона явно не указывалось.

Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Добавить фоновую картинку на веб-страницу, чтобы она повторялась только по вертикали. Решение Используйте свойство background со значением repeat-y для селектора body. Описание Повторение фона обычно требуется для создания декоративных линий или градиентов, привязанных к высоте элемента или окна веб-страницы. В таких случаях повторение фона по вертикали обеспечивает цельную картинку независимо от размеров элементов. Только вначале следует побеспокоиться о том, чтобы фоновое изображение повторялось без стыков. Предварительно следует подготовить фоновый рисунок, который должен удовлетворять ряду условий: занимать по высоте не меньше 20–30 пикселов; при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков. Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пиксела), то при отображении фона эффект его появления будет заметен невооруженным глазом. Увеличение высоты позволяет замостить фон элемента быстро и неприметно. В качестве образца фона возьмем узор, показанный на рис.

Комментариев: 0: 27-03-2016, 11:27

Распечатать

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Еще новости по теме:

Другие новости по теме:

Комментарии для сайта Cackle

ДОБАВИТЬ БАННЕР

АВТОРИЗАЦИЯ

РегистрацияЗабыли?

ДОБАВИТЬ БАННЕР
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется."
«Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации.

«Все для веб-дизайнера - CSS»

Афоризмы

Афоризмы

Афоризмы

Афоризмы

• Кто много знает, с того много и спрашивается.

• Знание — сила.

• Учение — путь к умению.

• Писать — не языком чесать.

Учебник CSS

Самоучитель CSS

Новости

Справочник CSS

Афоризмы

Причины популярности камеры GoPro и особенности современной техники

SpaceX отключит от Starlink нелегальных абонентов - «Новости сети»

Написание эффективного кода

Базовый синтаксис CSS

Причины популярности камеры GoPro и особенности современной техники

? ССЫЛКА НА Maestro - «Видео уроки - CSS»

Сделать, чтобы фон повторялся только по вертикали - «Фоновая картинка»

Задача

Решение

Описание