Как добавить фоновое изображение

В этой статье мы покажем, как добавить и позиционировать фоновое изображение в HTML-документе, используя стили CSS.

Как позиционировать фоновое изображение

  • background-image: (устанавливает одно или несколько фоновых изображений для элемента)
  • background-repeat: (устанавливает, должно ли повторяться фоновое изображение, а если повторяется, то каким образом)
  • background-attachment: (устанавливает, прокручивается ли фоновое изображение со всей страницей, или оно фиксированное)
  • background-position: (устанавливает начальную позицию фонового изображения)

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
    </style>
  </head>
  <body>
  </body>
</html>

В этом примере фоновое изображение расположено в центре. Можете также выбрать другие значения, например, left top; left center; left bottom; right top; right center; right bottom; и т.д.

Несколько способов позиционирования фонового изображения:

Используйте следующие значения свойств для повторения фонового изображения

  • repeat (фоновое изображение повторяется и по вертикали, и по горизонтали)
  • repeat-x (фоновое изображение повторяется только по горизонтали)
  • repeat-y (фоновое изображение повторяется только по вертикали)

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {background-image: 
      url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
      background-repeat: repeat-y; }       
    </style>
  </head>
  <body>
  </body>
</html>

В этом примере фоновое изображение повторяется только по вертикали.

Используйте значение no-repeat, чтобы фоновое изображение не повторялось (изображение отображается только один раз).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
      background-repeat: no-repeat;}   
    </style>
  </head>
  <body>
  </body>
</html>

Для того, чтобы создать фоновое изображение на всю страницу с помощью CSS, добавьте фоновое изображение к контейнеру, задав height: 100%.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body, html {  height: 100%;margin: 0;}
      .bg {
      /* Использованное изображение */
      background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg");
      /* Полная высота */
      height: 100%;
      /* Центрируйте и масштабируйте изображение правильно */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;  }
    </style>
  </head>
  <body>
    <div class="bg"></div>
  </body>
</html>

Для того, чтобы получить прозрачное фоновое изображение, используйте свойство opacity, которое указывает прозрачность элемента. Выберите значение в пределах 0.0-1.0. , чтобы снизить степень прозрачности (например, 0.5 делает изображение полупрозрачным).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img { opacity: 0.5;
      filter: alpha(opacity=50); /* For IE8 and earlier */}
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"
      width="300" height="150">
  </body>
</html>

В вышеприведенном примере изображение имеет прозрачность 50%.

В IE8 и более старых версиях используется filter:alpha(opacity=x), где можно задать значение в пределах 0-100.