HTML Фоновые изображения
Фоновое изображение можно указать почти для любого элемента HTML.
Фоновое изображение на HTML элементе
Чтобы добавить фоновое изображение к элементу HTML, используйте HTML атрибут style и CSS свойство background-image:
Пример
Добавьте фоновое изображение в HTML:
<div style="background-image: url('img_girl.jpg');">
Попробуйте сами »
Вы также можете указать фоновое изображение в элементе <style> в разделе <head>:
Пример
Укажите фоновое изображение в элементе <style>:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Попробуйте сами »
Фоновое изображение на странице
Если вы хотите, чтобы вся страница имела фоновое изображение, необходимо указать фоновое изображение в элементе <body>:
Пример
Добавьте фоновое изображение для всей страницы:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Попробуйте сами »
Повторение фона
Если фоновое изображение меньше элемента, изображение будет повторяться по горизонтали и вертикали, пока не достигнет конца элемента:
Пример
<style>
body {
background-image: url('../images/example_img_girl.jpg');
}
</style>
Попробуйте сами »
Чтобы избежать повтора фонового изображения, установите для свойства background-repeat значение no-repeat.
Пример
<style>
body {
background-image: url('../images/example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Попробуйте сами »
Фон обложки
Если вы хотите, чтобы фоновое изображение охватывало весь элемент, вы можете установить для свойства background-size значение cover.
Также, чтобы весь элемент был всегда покрыт, установите для свойства background-attachment значение fixed:
Таким образом, фоновое изображение покроет весь элемент, не растягиваясь (изображение сохранит первоначальные пропорции):
Пример
<style>
body {
background-image: url('../images/img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Попробуйте сами »
Растяжение фона
Если вы хотите, чтобы фоновое изображение растягивалось, чтобы вместить весь элемент, вы можете установить для свойства background-size значение 100% 100%:
Попытайтесь изменить размер окна браузера, и вы увидите, что изображение растягивается, но всегда охватывает весь элемент.
Пример
<style>
body {
background-image: url('../images/img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Попробуйте сами »
Узнать больше о CSS
Из приведенных выше примеров вы узнали, что фоновые изображения можно стилизовать с помощью CSS свойств фона.
Чтобы узнать больше о фоновых CSS свойствах, прочтите раздел CSS Фон на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Как добавить фоновое изображение в HTML-элемент?
- Какой атрибут используется для добавления фонового изображения?
- Какое свойство CSS используется для добавления фонового изображения?
- Где нужно указать путь к фоновому изображению, чтобы вся страница имела фоновое изображение?
- Как будет отображаться на веб-странице фоновое изображение, если оно меньше HTML-элемента?
- Какое значение нужно установить для свойства background-repeat, чтобы избежать повторения фонового изображения?
- Какое значение нужно установить для свойства background-size, чтобы фоновое изображение охватывало весь HTML-элемент?
- Какое значение нужно установить для свойства background-attachment, чтобы весь HTML-элемент был всегда покрыт?
- Какое значение нужно установить для свойства background-size, чтобы фоновое изображение растягивалось, чтобы вместить весь HTML-элемент?
