Свойство CSS background-size
Фоновые изображения не обязаны отображаться в своих естественных размерах, потому что их можно изменить с помощью background-size.
Это свойство принимает длину, процент или одно из трёх ключевых слов: auto, contain и cover.
Размер фона в пикселях
Здесь значения в пикселях уменьшают фоновое изображение так, что оно становится намного меньше исходного файла.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Pixels</title>
<style>
#div1 {
background-image: url("img_flower.jpg");
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
padding: 20px;
}
</style>
</head>
<body>
<h2>Lorem Ipsum Dolor</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Размер фона с contain, cover и auto
auto вы получаете, ничего не задавая: изображение сохраняет свои исходные размеры.
contain увеличивает или уменьшает изображение так, чтобы оно поместилось в области содержимого.
cover делает изображение настолько большим, чтобы ни одна часть области содержимого не осталась непокрытой.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Keywords</title>
<style>
div {
width: 100%;
height: 200px;
border: 1px solid black;
margin-bottom: 20px;
background-image: url("img_flwr.gif");
background-repeat: no-repeat;
}
#div1 {
background-size: contain;
}
#div2 {
background-size: cover;
}
#div3 {
background-size: auto;
}
</style>
</head>
<body>
<h2>background-size: contain</h2>
<div id="div1"></div>
<h2>background-size: cover</h2>
<div id="div2"></div>
<h2>background-size: auto</h2>
<div id="div3"></div>
</body>
</html>
Задание размеров нескольких фоновых изображений
Если у элемента несколько фонов, передайте background-size список значений, разделённых запятыми.
Пример
Каждое из трёх фоновых изображений здесь получает собственное значение background-size.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multiple Background Sizes</title>
<style>
#div1 {
background-image: url("img_tree.gif"), url("img_flwr.gif"), url("paper.gif");
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Multiple Background Sizes</h2>
<div id="div1"></div>
</body>
</html>
Полноразмерное фоновое изображение CSS
Чтобы фоновое изображение всегда заполняло окно браузера, задайте стили элементу <html>. Цель — центрированное изображение, которое масштабируется при необходимости, заполняет страницу без белого пространства и никогда не вызывает появления полос прокрутки.
Пример
На элементе <html> отцентрируйте и зафиксируйте фон, а затем с помощью background-size: cover растяните его на всё окно.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Size Background Image</title>
<style>
html {
background: url("img_man.jpg") no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Size Background Image</h1>
<p>This background image covers the entire browser window.</p>
</body>
</html>
Hero-изображение CSS
Hero-изображение — это большое изображение с текстом поверх него, и чтобы его создать, достаточно элемента <div> с несколькими свойствами фона.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero Image</title>
<style>
.hero-image {
background: url("img_man.jpg") no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1>I am John</h1>
<p>And I'm a Photographer</p>
</div>
</div>
</body>
</html>