Продолжим тему Фоновые изображения
Повтор фонового изображения интересен тем, что можно в блок поместить очень маленькую картинку, и она размножившись займёт всё отведённое пространство.
Плюсом этого свойства является то, что такая картинка имеет очень маленький вес, и это благоприятно сказывается на скорости загрузки сайта, а также, при помощи его, легко сделать полосатый фон.
Достаточно сделать с края поля одну полоску, и она повторяясь займёт всё отведённое пространство.
Называется это свойство background-repeat, и имеет несколько значений
1. no-repeat — Запрещает повтор изображения, и оно по умолчанию размещается в левом верхнем углу.
2. repeat — изображение повторяется по горизонтали и вертикали.
3. repeat-x — изображение повторяется только по горизонтали.
4. repeat-y — изображение повторяется только по вертикали.
Давайте возьмём вот такую маленькую картинку, и сделаем из неё фон для тега body, то есть для поля экрана.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
body{
background-image: url(images/i3.png);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Посмотрим результат.
Вообще-то значение repeat выполняется по умолчанию, и применяется только в специальных случаях. В основном применяется запрет повтора — no-repeat.
В следующем уроке мы научимся на фоновые изображения накладывать другие картинки, и размещать их в нужных нам местах, так что прошу на следующую страницу.
Перемена
Учитель физики будит заснувшего ученика:
— И кого ты видел во сне?
— Ломоносова. Он вам, Петр Иванович, привет передавал!
Фоновые изображения в css < < < В раздел > > > Позиционируем фоновое изображение
Спасибо огромное, только здесь нашёл адекватный простой и понятный рецепт как это делать. Сделал за пару секунд с первого раза, всё работает! 😉
Всегда рад помочь.
Приходил. Проконсультировался. Спасибо!!!!