CSS Background Repeat - Повторення фону
CSS background-repeat
За замовчуванням властивість background-image повторює зображення як по горизонталі, так і по вертикалі.
Деякі зображення варто повторювати тільки по горизонталі або вертикалі, інакше вони будуть виглядати дивно, як це:
Якщо зображення вище повторюється тільки по горизонталі (background-repeat: repeat-x;), фон буде виглядати краще:
Приклад
body {
background-image: url("../images/gradient_bg.png");
background-repeat: repeat-x;
}
Спробуйте самі »
Порада: Щоб повторити зображення по вертикалі, встановіть background-repeat: repeat-y;
CSS background-repeat: no-repeat
Відображення фонового зображення тільки один раз також визначається властивістю background-repeat:
Приклад
Показати фонове зображення тільки один раз:
body {
background-image: url("../images/img_tree.png");
background-repeat: no-repeat;
}
Спробуйте самі »
В наведенному вище прикладі фонове зображення розташовується в те саме місце, що і текст. Ми хочемо змінити положення зображення, щоб воно не надто заважало тексту.
CSS background-position
Властивість background-position використовується для вказування положення (позиції) фонового зображення.
Приклад
Розмістіть фонове зображення в правому верхньому куті:
body {
background-image: url("../images/img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Спробуйте самі »
CSS — Повторення фону та розташування — W3Schools Відеоурок
Це відео є вступом до Повторення фону та розташування в CSS.
Частина серії відеоуроків для вивчення CSS для початківців!
