23. Повтор фонового изображения.
На данном уроке мы изучим свойство background-repeat, которое определяет повторять ли фоновое изображение и как именно его следует повторять.
Обои мы с вами уже изучали в курсе НТМЛ на уроке "Обои для сайта", где нас развлекала машина подборки обоев.
Теперь опять займемся обоями, но уже с подходом css-дизайнера, а не html-кодировщика, как ранее.
Давайте, посетим сайт, на котором можно скачать различные обои - паттерны:
Скачаем оттуда несколько любых, первых попавшихся, заготовок и сделаем несколько вот примерно таких маленьких файлов:
Теперь попробуем использовать эти файлы для фонов блочных элементов.
Примеры выше показывают, как работает свойство background-repeat по умолчанию: фоновый рисунок повторяется по горизонтали и вертикали.
Практическую полезность свойства background-repeat со значением repeat-x можно оценить на примере вот этого файла, имеющего большую высоту и незначительную ширину → → →
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_023_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_023_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обои мы с вами уже изучали в курсе НТМЛ на уроке "Обои для сайта", где нас развлекала машина подборки обоев.
Теперь опять займемся обоями, но уже с подходом css-дизайнера, а не html-кодировщика, как ранее.
Давайте, посетим сайт, на котором можно скачать различные обои - паттерны:
Скачаем оттуда несколько любых, первых попавшихся, заготовок и сделаем несколько вот примерно таких маленьких файлов:
Теперь попробуем использовать эти файлы для фонов блочных элементов.
.body_css_023_1 {
background-color: #C3C3C3;
background-image: url('images/pattern01.gif');
}
.body_css_023_2 {
background-color: #C3C3C3;
background-image: url('images/pattern02.gif');
}
.body_css_023_3 {
background-color: #C3C3C3;
background-image: url('images/pattern03.gif');
}
.body_css_023_3i {
background-color: #C3C3C3;
background-image: url('images/pattern03invert.gif');
}
.body_css_023_4 {
background-color: #C3C3C3;
background-image: url('images/pattern04.gif');
}
Примеры выше показывают, как работает свойство background-repeat по умолчанию: фоновый рисунок повторяется по горизонтали и вертикали.
.body_css_023_1_r_x {
background-color: #C3C3C3;
background-image: url('images/pattern01.gif');
background-repeat:repeat-x;
}
Используя свойство background-repeat со значением repeat-x получаем повторение фонового рисунка по горизонтали.
.body_css_023_1_r_y {
background-color: #C3C3C3;
background-image: url('images/pattern01.gif');
background-repeat:repeat-y;
}
Используя свойство background-repeat со значением repeat-y получаем повторение фонового рисунка по вертикали.
.body_css_023_1_no_r {
background-color: #C3C3C3;
background-image: url('images/pattern01.gif');
background-repeat:no-repeat;
}
Используя свойство background-repeat со значением no-repeat получаем фоновый рисунок без повторений.
Практическую полезность свойства background-repeat со значением repeat-x можно оценить на примере вот этого файла, имеющего большую высоту и незначительную ширину → → →
Фоновый рисунок повторяется по горизонтали
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_023_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_023_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
