Background-image - является универсальным свойством CSS и позволяет задать несколько параметров фона одновременно. Фоновое изображение можно указать практически для любого элемента HTML!
Фоновое изображение в элементе 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>
☛ Элемент изображения HTML
HTML карты изображений ☚
