Как правильно добавлять фоновую картинку на страницу?

Question

[Alex_87]

Ребят, нужно на весь футер повесить изображение, поверх которого будут другие элементы! Скажите пожалуйста, как правильно добавить это изображение? Прописать путь в html или в css, есть ли разница? И как растянуть так, чтобы при уменьшении экрана, она смотрелась прилично? Какие свойства нужно прописать, подскажите пожалуйста?

Comments

[Максим Иванов]

Я обычно фоновые добавляю через background-image width: 100%;

Answer 1

[Алексей Ярков]

Типа того: https://jsfiddle.net/yarkov_aleksei/z74cgm3v/4/

<footer>
  <div class="content">
   Тут контент и прочая ересь
  </div>
</footer>

footer {
  height: 150px;
  background-image: url(https://img.gazeta.ru/files3/649/13056649/smesha-pic4_zoom-1500x1500-92995.jpg);
  background-position: center;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff0000;
  height: 100%;
}

Comments

[Alex_87]

Ничего себе! А как без absolute content поверх картинки находиться? Не знал, что display flex обладает таким замечательным свойством. Удивительно. Для меня, честно говоря, это небольшое открытие

[Алексей Ярков]

Alex_87, при чём тут флекс вообще? Вы картинку фоном указываете, а не тегом img. Она вообще никаким боком мешать не будет ничему и никому.

[Alex_87]

Алексей Ярков, а, вот в чём дело! Понятно! ... Но у этого подхода, как мне кажется есть недостаток и заключается он в том, что вы не сможете отрегулировать content по высоте, как вам хочется. А не исходя из 3-х позиций.

Answer 2

[Акбар Ильхамбаев]

.bg {
background : url ("путь");
backgound-size: cover ;