Размноженное изображение

Продолжим тему Фоновые изображения

Повтор фонового изображения интересен тем, что можно в блок поместить очень маленькую картинку, и она размножившись займёт всё отведённое пространство.

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

Достаточно сделать с края поля одну полоску, и она повторяясь займёт всё отведённое пространство.

Называется это свойство 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>

Посмотрим результат.

Результат применения свойства css - background-repeat: repeat;

Вообще-то значение repeat выполняется по умолчанию, и применяется только в специальных случаях. В основном применяется запрет повтора — no-repeat.

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

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Учитель физики будит заснувшего ученика:
— И кого ты видел во сне?
— Ломоносова. Он вам, Петр Иванович, привет передавал!

Фоновые изображения в css < < < В раздел > > > Позиционируем фоновое изображение
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

3 комментария на «Размноженное изображение»

  1. Антон говорит:

    Спасибо огромное, только здесь нашёл адекватный простой и понятный рецепт как это делать. Сделал за пару секунд с первого раза, всё работает! 😉

  2. stariс говорит:

    Всегда рад помочь.

  3. Юрий говорит:

    Приходил. Проконсультировался. Спасибо!!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *