Фоновое изображение CSS

Оглавление

    Показать оглавление

CSS-фоновое изображение

Свойство background-image определяет изображение, которое будет использоваться в качестве фона элемента.

По умолчанию изображение повторяется и охватывает весь элемент.

Пример

Установите фоновое изображение для страницы:

body {
  background-image: url("paper.gif");
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Пример

В этом примере показано плохое сочетание текста и фонового изображения. Текст едва читаемо:

body {
  background-image: url("bgdesert.jpg");
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

Примечание. При использовании фонового изображения используйте изображение, которое не мешает тексту.

Фоновое изображение также можно установить для определенных элементов, например элемента <p>:

Пример

 p {
  background-image: url("paper.gif");
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

Свойство фонового изображения CSS

background-image

Устанавливает фоновое изображение для элемента