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

Пользователь

от fredy , в категории: HTML/CSS , 3 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от rupert.collins , 3 года назад

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


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


Примечание:

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

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

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



Пользователь

от bernardo_nolan , 2 года назад

@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;
}


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