Повторение фона

3.1 Свойство background-repeat

Свойства background-repeat и background-size в CSS используются для управления тем, как фоновые изображения повторяются и масштабируются внутри элементов. Эти свойства предоставляют веб-разработчикам гибкие инструменты для создания визуально привлекательных фонов. Рассмотрим каждое из них подробнее.

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

Значения

• repeat: изображение повторяется по горизонтали и вертикали (по умолчанию)
• repeat-x: изображение повторяется только по горизонтали
• repeat-y: изображение повторяется только по вертикали
• no-repeat: изображение не повторяется

1. Значение repeat:

Повторяет изображение по горизонтали и вертикали.

      
        .repeat {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 20px 20px;
          background-repeat: repeat;
          border: 1px solid #000;
        }
      
    

    
      .repeat {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-repeat: repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat"></div>
    
  

2. Значение repeat-x:

Повторяет изображение по горизонтали.

      
        .repeat-x {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 20px 20px;
          background-repeat: repeat-x;
          border: 1px solid #000;
        }
      
    

    
      .repeat-x {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-repeat: repeat-x;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-x"></div>
    
  

3. Значение repeat-y:

Повторяет изображение по вертикали.

      
        .repeat-y {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 20px 20px;
          background-repeat: repeat-y;
          border: 1px solid #000;
        }
      
    

    
      .repeat-y {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-repeat: repeat-y;
        border: 1px solid #000;
      }
    
  

    
      <div class="repeat-y"></div>
    
  

4. Значение no-repeat:

Изображение не повторяется.

      
        .no-repeat {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 20px 20px;
          background-repeat: no-repeat;
          border: 1px solid #000;
        }
      
    

    
      .no-repeat {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-repeat: no-repeat;
        border: 1px solid #000;
      }
    
  

    
      <div class="no-repeat"></div>
    
  

Объяснение кода

• .repeat: изображение повторяется по горизонтали и вертикали, заполняя весь элемент
• .repeat-x: изображение повторяется только по горизонтали
• .repeat-y: изображение повторяется только по вертикали
• .no-repeat: изображение не повторяется и отображается только один раз

3.2 Свойство background-size

Свойство background-size управляет размером фонового изображения. Оно позволяет изменять размер изображения, чтобы оно лучше вписывалось в элемент.

Значения:

• auto: размер изображения определяется автоматически (по умолчанию)
• cover: изображение масштабируется, чтобы полностью покрыть элемент, сохраняя пропорции
• contain: изображение масштабируется, чтобы полностью вписаться в элемент, сохраняя пропорции
• Абсолютные значения: например, 100px 50px задают ширину и высоту изображения в пикселях
• Процентные значения: например, 50% 50% задают ширину и высоту изображения в процентах от размера элемента

1. Размер по умолчанию (auto):

Размер изображения определяется автоматически (по умолчанию).

      
        .size-auto {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 35px 35px;
          border: 1px solid #000;
        }
      
    

    
      .size-auto {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg'); // оригинальный размер изображения - 35рх на 35рх
        background-size: auto;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-auto"></div>
    
  

2. cover:

Изображение масштабируется, чтобы полностью покрыть элемент, сохраняя пропорции.

      
        .size-cover {
          width: 300px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: cover;
          border: 1px solid #000;
        }
      
    

    
      .size-cover {
        width: 300px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg'); // оригинальный размер изображения - 35рх на 35рх
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-cover"></div>
    
  

3. contain:

Изображение масштабируется, чтобы полностью вписаться в элемент, сохраняя пропорции.

      
        .size-contain {
          width: 300px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: contain;
          border: 1px solid #000;
        }
      
    

    
      .size-contain {
        width: 300px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg'); // оригинальный размер изображения - 35рх на 35рх
        background-size: contain;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-contain"></div>
    
  

4. Абсолютные значения:

Например, 100px 50px задают ширину и высоту изображения в пикселях.

      
        .size-pixels {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 100px 50px;
          border: 1px solid #000;
        }
      
    

    
      .size-pixels {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-size: 100px 50px;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-pixels"></div>
    
  

5. Процентные значения:

Например, 50% 50% задают ширину и высоту изображения в процентах от размера элемента.

      
        .size-percent {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-size: 50% 50%;
          border: 1px solid #000;
        }
      
    

    
      .size-percent {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-size: 50% 50%;
        border: 1px solid #000;
      }
    
  

    
      <div class="size-percent"></div>
    
  

Объяснение кода:

• .size-auto: размер изображения определяется автоматически
• .size-cover: изображение масштабируется, чтобы полностью покрыть элемент, сохраняя пропорции. Части изображения могут быть обрезаны
• .size-contain: изображение масштабируется, чтобы полностью вписаться в элемент, сохраняя пропорции. Изображение будет целиком видно, но могут быть пустые области
• .size-pixels: размер изображения задан в пикселях (100px по ширине и 50px по высоте)
• .size-percent: размер изображения задан в процентах от размера элемента (50% по ширине и 50% по высоте)

3.3 Совместное использование background-repeat и background-size

Свойства background-repeat и background-size часто используются вместе для достижения желаемого эффекта отображения фоновых изображений.

Пример использования:

      
        .combined {
          width: 200px;
          height: 200px;
          background-image: url('https://cdn.javarush.com/images/article/cf9c5640-1f70-4b75-919f-b33540e9a54f/256.jpeg');
          background-repeat: no-repeat;
          background-size: cover;
          border: 1px solid #000;
        }
      
    

    
      .combined {
        width: 200px;
        height: 200px;
        background-image: url('./img/emoji-alien.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #000;
      }
    
  

    
      <body>
        <div class="combined"></div>
      </body>
    
  

Объяснение кода:

• background-repeat: no-repeat;: изображение не повторяется
• background-size: cover;: изображение масштабируется, чтобы полностью покрыть элемент, сохраняя пропорции. Части изображения могут быть обрезаны

1

Задача

Модуль 1: Web Core, 10 уровень, 2 лекция

Недоступна

Фон (repeat)

Фон (repeat)

Открыть

1

Задача

Модуль 1: Web Core, 10 уровень, 2 лекция

Недоступна

Фон (cover)

Фон (cover)

Открыть