Картинка фоном

Щоб встановити картинку фоном для HTML-сторінки за допомогою HTML і CSS, потрібно використовувати CSS для стилізації фону. Ось приклад коду:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Фон з картинки</title>
    <style>
        body {
            /* Встановлюємо фон */
            background-image: url('img/bckgrnd.jpg');
            /* Фон буде займати весь екран */
            background-size: cover;
            /* Фон буде зафіксований при скролінгу */
            background-attachment: fixed;
            /* Центрування фону */
            background-position: center;
            /* Не повторювати фон */
            background-repeat: no-repeat;
            /* Встановлюємо висоту на 100% */
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>Привіт, світ!</h1>
</body>
</html>

Пояснення:

background-image: вказує шлях до зображення, яке буде використовуватися як фон.
background-size: cover: зображення адаптується, щоб повністю заповнити екран.
background-attachment: fixed: робить фон статичним, щоб при прокручуванні сторінки він залишався на місці.
background-position: center: центрує зображення.
background-repeat: no-repeat: вимикає повторення зображення.
height: 100vh: висота тіла сторінки встановлюється на 100% висоти видимої частини екрану.

background-attachment визначає, чи буде фон залишатися зафіксованим при прокручуванні сторінки або рухатися разом із вмістом.

Є два основні значення для цієї властивості:

background-attachment: fixed; — фон буде зафіксованим і не рухатиметься під час скролінгу сторінки. Зображення залишається на місці, незалежно від того, наскільки вниз прокручується контент.
background-attachment: scroll; (значення за замовчуванням) — фон рухається разом із вмістом сторінки. Під час прокручування зображення фону також буде рухатися.

Наприклад:

body {
    background-image: url('img/bckgrnd.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Приклад рухомого фону */
    background-attachment: scroll; /* або просто можна не вказувати це */
}

Тому, якщо ти хочеш, щоб фон рухався разом із прокруткою сторінки, використовуй background-attachment: scroll або просто пропусти цю властивість, оскільки це стандартна поведінка.

В CSS властивість background-repeat контролює, як зображення фону буде повторюватися по горизонталі та вертикалі. Ось доступні опції:

Основні значення:

repeat (значення за замовчуванням):
- Зображення повторюється як по горизонталі, так і по вертикалі.
```
background-repeat: repeat;
```
no-repeat:
- Зображення не повторюється ні по горизонталі, ні по вертикалі. Воно з'явиться один раз.
```
background-repeat: no-repeat;
```
repeat-x:
- Зображення повторюється тільки по горизонталі (вправо і вліво), але не по вертикалі.
```
background-repeat: repeat-x;
```
repeat-y:
- Зображення повторюється тільки по вертикалі (вгору і вниз), але не по горизонталі.
```
background-repeat: repeat-y;
```

Більш детальні опції:

space:
- Зображення повторюється, але між кожною копією додається простір (якщо простір не заповнюється повністю рівними копіями). Зображення розташовуються без обрізання.
```
background-repeat: space;
```
round:
- Зображення повторюється, але воно масштабуватиметься таким чином, щоб вміститися в елементі без обрізання. Кожне зображення буде пропорційно збільшено або зменшено.
```
background-repeat: round;
```

Можливість комбінування:

Також можна вказати різні значення для повторення по горизонталі та вертикалі одночасно.

Перше значення — по горизонталі, друге — по вертикалі.

background-repeat: repeat no-repeat;

Це означає, що фон буде повторюватись по горизонталі, але не по вертикалі.

Приклад у HTML:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repeat Background</title>
    <style>
        body {
            background-image: url('img/bckgrnd.jpg');
            background-repeat: repeat-x; /* Повторення тільки по горизонталі */
        }
    </style>
</head>
<body>
    <h1>Привіт, світ!</h1>
</body>
</html>

PreviousОб использовании нестандартных пробелов NextБезпечні веб-шрифти

Last updated 8 months ago