Повторення фону

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рх x 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рх x 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рх x 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;: зображення масштабується, щоб повністю покрити елемент, зберігаючи пропорції. Частини зображення можуть бути обрізані