HTML фоновые изображения
Фоновое изображение можно указать практически для любого элемента HTML.
Фоновое изображение в элементе HTML
styleЧтобы добавить фоновое изображение к элементу HTML, используйте атрибут HTML и background-imageсвойство CSS:
Пример
Добавьте фоновое изображение в элемент 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 .