Как вставить картинку фоном в css?

Для того, чтобы вставить картинку фоном в css, прописываем следующее:

1
2
3
4
5
6

<style>
        body {
            background: url(путь к картинке);
            background-size: 100%;
        }
    </style> 

Примечание:

Свойства background-attachment - фиксируется фон страницы

Cвойства background-repeat - устанавливается повторение изображения по горизонтали

Cвойство background-size: 100% - растянет фоновое изображение на весь размер окна браузера

@fredy 

Чтобы вставить картинку фоном в CSS, вы можете использовать свойство background-image. Например:

1
2
3

.your-class {
  background-image: url('your-image-url.jpg');
}

Это вставит картинку фоном в элемент с классом your-class. Если вы хотите вставить картинку фоном во все элементы с определенным тегом, например body, вы можете указать тег вместо класса:

1
2
3

body {
  background-image: url('your-image-url.jpg');
}

Если вы хотите управлять тем, как картинка будет отображаться на фоне, вы также можете использовать следующие свойства:

• background-repeat: определяет, следует ли повторять картинку по горизонтали и/или вертикали.
• background-position: определяет, где начинается картинка фона относительно элемента.
• background-size: определяет размер картинки фона.

Например:

1
2
3
4
5
6

.your-class {
  background-image: url('your-image-url.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Это вставит картинку