Background-image - является универсальным свойством CSS и позволяет задать несколько параметров фона одновременно. Фоновое изображение можно указать практически для любого элемента HTML!
Чтобы добавить фоновое изображение к элементу HTML, используйте HTML атрибут style
и свойство CSS background-image
:
<p style="background-image: url('/htm/img_clouds.png');">
Вы также можете указать своё изображение в элементе <style>
в разделе <head>
:
<style>
p {
background-image: url('/htm/img_clouds.png');
}
</style>
Если вы хотите, чтобы вся страница отображала фоновое изображение, вы должны указать background-image
в элементе <body>
.
Добавление фонового изображение для всей страницы:
<style>
body {
background-image: url('/htm/img_clouds.png');
}
</style>
Если изображение меньше элемента, оно будет повторяться по горизонтали и вертикали, пока не достигнет конца элемента:
<style>
body {
background-image: url('/htm/img_clouds.png');
}
</style>
Чтобы фоновое изображение не повторялось, установите для свойства background-repeat
значение no-repeat
:
<style>
body {
background-image: url('/htm/img_clouds.png');
background-repeat: no-repeat;
}
</style>
Если вы хотите, чтобы фоновое изображение покрывало весь элемент, вы можете установить для свойства background-size
значение cover
.
Кроме того, чтобы убедиться, что весь элемент всегда закрыт, установите для свойства background-attachment
значение fixed
:
Таким образом, фоновое изображение будет охватывать весь элемент без растягивания (изображение сохранит свои первоначальные пропорции):
<style>
body {
background-image: url('/htm/img_clouds.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Чтобы фоновое изображение растягивалось на весь элемент, вы можете установить для свойства background-size
значение 100% 100%:
Попробуйте изменить размер окна браузера, и вы увидите, что изображение растягивается, но всегда закрывает весь элемент.
<style>
body {
background-image: url('/htm/img_clouds.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Является ли утверждение верным?
Проверьте себя, насколько хорошо вы запомнили материал.