Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 10.0 | 10.5 | 11.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Ні | Ні | Так | Так | Так | Ні | Так | Так | Ні | Ні | Так | Ні | Ні | Так

Коротка інформація

CSS | CSS3
Значення за умовчанням | auto
Наслідує | Ні
Застосовується | До всіх елементів
Аналог HTML | Нема
Посилання на специфікацію | http://www.w3.org/TR/css3-background/#the-backgroundsize

Опис

Масштабує фонове зображення згідно із заданими розмірами.

Синтаксис

background - size: [ <значення> | <відсотки> | auto ]{1,2} | cover | contain

Значення

значення | Задає розмір у будь-яких доступних для CSS одиницях - піксели (px), сантиметри (cm), em та ін.
Відсотки | Задає розмір фонової картинки у відсотках від ширини або висоти елементу.
Auto | Якщо задано одночасно для ширини і висоти (auto auto), розміри фону залишаються початковими; якщо тільки для однієї сторони картинки (100px auto), то розмір обчислюється автоматично виходячи з пропорцій картинки.
Cover | Масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку.
contain | Масштабує зображення зі збереженням пропорцій так, щоб картинка цілком помістилася всередину блоку.

Якщо встановлено одно значення, воно задає ширину фону, другого значення набуває за auto. Пропорції картинки

при цьому зберігаються. Використання двох значень через пропуск задає ширину і висоту фонової картинки.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>background-size</title>

<style type="text/css">

div {

height: 200px; /* Висота блоку */

border: 2px solid #000; /* Параметри рамки */

background: url('mybg.gif') 100% 100% no-repeat; /* Добавляємо фон */

background-size: cover; /* Масштиабуємо фон */

} </style>

</head>

<body>

<div>Луцький національний технчний університет є одним із найкращих професійних закладів освіти у місті Луцьку</div>

</body>

</html>

Браузери

Firefox до версії 4.0 використовує нестандартну властивість - moz - background - size.

Safari і Chrome використовують нестандартну властивість - webkit - background - size.

### Opera до версії 10.53 використовує нестандартну властивість - o - background - size.