Для зміни розмірів фонового зображення використовується властивість background-size. Значення 100% масштабує зображення на всю доступну ширину, при цьому висота буде задана автоматично, виходячи із пропорцій картинки (1).
Приклад 1. Використання background-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина фону</title> <style> body { background-image: url(/example/image/shark.jpg); /* Адреса картинки */
background-size: 100%; /* Ширина картинки */
}
</style>
</head>
<body>
</body>
</html>Результат цього прикладу показаний на рис. 1. Зверніть увагу, що за промовчанням зображення повторюється по вертикалі. Якщо повторення заборонити через background-repeat, то фонове зображення буде займати лише частину веб-сторінки.
Мал. 1. Фонове зображення на всю ширину веб-сторінки
Часто також потрібно обмежити висоту фону фіксованим значенням, а ширину залишити 100%. Для цього використовуємо властивість height для вказівки висоти, а для background-size пишемо значення cover (приклад 2).
Приклад 2. Використання background-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина фону</title> <style> div { height: 250px; /* Висота блоку */
background-image: url(/example/image/shark.jpg); /* Адреса картинки */
background-size: cover; /* Заповнення */
}
</style>
</head>
<body> <h1>Домашня акула</h1> <div></div>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Фонова картинка на всю ширину елемента