Тег background-size в CSS: опис, синтаксис та значення
Тег background-size в CSS використовується для масштабування фонового зображення згідно вказаних розмірів.
| Значення за замовчуванням | auto |
|---|---|
| Наслідується | Ні |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/css3-background/#the-background-size |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Масштабує фонове зображення відповідно до вказаних розмірів.
Синтаксис
background-size: [ <значення> | <відсотки> | auto ]{1,2} | cover | contain
Значення
- <значення>
- Задає розмір в будь-яких одиницях виміру, доступних для CSS - пікселі (px), сантиметри (cm), em тощо.
- <відсотки>
- Задає розмір фонового зображення у відсотках від ширини або висоти елемента.
- auto
- Якщо вказано одночасно для ширини і висоти (auto auto), розміри фону залишаються початковими; якщо лише для однієї сторони зображення (100px auto), розмір обчислюється автоматично відповідно до пропорцій зображення.
- cover
- Масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку.
- contain
- Масштабує зображення зі збереженням пропорцій так, щоб картинка цілком помістилася всередині блоку.
Якщо встановлено одне значення, воно задає ширину фону, друге значення приймається як auto. Пропорції зображення при цьому зберігаються. Вказання двох значень через пробіл задає ширину і висоту фонового зображення.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size</title>
<style>
div {
height: 200px; /* Висота блоку */
border: 2px solid #000; /* Параметри рамки */
background: url(images/mybg.png) 100% 100% no-repeat; /* Додаємо фон */
background-size: cover; /* Масштабуємо фон */
}
</style>
</head>
<body>
<div>...</div>
</body>
</html>Браузери
Safari до версії 4.1 та Chrome до версії 3.0 використовують нестандартне властивість -webkit-background-size.
Opera до версії 10.53 використовує нестандартне властивість -o-background-size.
Firefox до версії 4.0 використовує нестандартне властивість -moz-background-size.