Фоновое изображение может быть задано практически для любого 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('example_img_girl.jpg');
}
</style>
Попробуйте сами »
Чтобы фоновое изображение не повторялось, установите для свойства background-repeat значение no-repeat.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Попробуйте сами »
Фоновая обложка
Если вы хотите, чтобы фоновое изображение покрывало весь элемент, вы можете установить для свойства background-size значение cover.
Кроме того, чтобы убедиться, что весь элемент покрыт, установите для свойства background-attachment значение fixed:
Таким образом, фоновое изображение будет покрывать весь элемент, не растягиваясь (изображение сохранит свои первоначальные пропорции):
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Попробуйте сами »
Фоновая растяжка
Если вы хотите, чтобы фоновое изображение растягивалось, чтобы соответствовать всему элементу, вы можете установить для свойства background-size значение 100% 100%:
Попробуйте изменить размер окна браузера, и вы увидите, что изображение будет растягиваться, но всегда охватывать весь элемент.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Попробуйте сами »
Узнайте больше о CSS
Из приведенных выше примеров вы узнали, что фоновые изображения можно стилизовать с помощью свойств фона CSS.
Чтобы узнать больше о свойствах фона CSS, изучите наши CSS Background Учебник.