| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 3.0+ | 9.6+ | 3.1+ | 3.6+ | 2.0+ | 1.0+ |
Завдання
Розтягнути фонову картинку на всю ширину вікна браузера за допомогою CSS3.
Рішення
Для масштабування фону призначене властивість background-size, як його значення вказується 100%, тоді фон буде займати всю ширину вікна браузера. Для старих версій браузерів слід використовувати специфічні властивості з префіксами, як показано в прикладі 1.
Приклад 1. Розтягувати фон
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Розтягувати фон</title>
<style>
body {
background: url(images/sun2.png) no-repeat;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ і Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Сучасні браузери */
}
</style>
</head>
<body>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Вигляд фону при зменшеному розмірі вікна
При збільшенні розміру вікна браузера фон також почне розширюватися, це призведе до погіршення виду картинки (рис. 2).
Рис. 2. Вигляд фону при збільшеному розмірі вікна