Как вынести background-image за пределы контейнера?

100

06 апреля 2021, 07:30

Всем привет) У меня есть контейнер куда я помещаю все части страницы (header, main,footer) и там же мой фон (background-image). Мне нужно мой фон вынести за пределы этого div, чтоб он был на всю ширину окна браузера. Как это можно реализовать? Заранее спасибо)

Answer 1

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

<wrapper>
  <container>
  </container>
</wrapper>

И все слова мои в сумме имеют такой вид

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  height: 400px; 
  width: 100%; 
  background-color: lightgreen; 
  background-image: url(https://i.stack.imgur.com/Q9h3N.jpg); 
  background-size: 100% auto; 
} 
 
.container { 
  width: 980px; 
  min-height: 400px; 
  margin: auto; 
} 
 
nav { 
  height: 50px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  background: rgba(200, 200, 200, 0.5); 
  padding: 0 20px; 
} 
 
nav a { 
  text-decoration: none; 
  font-size: 20px; 
} 
 
nav a:not(:first-child) { 
  margin-left: 20px; 
} 
 
.logo { 
  width: 40px; 
  height: 40px; 
  background: #ccc; 
  text-align: center; 
  line-height: 40px; 
}

<div class="wrapper"> 
  <div class="container"> 
    <nav> 
      <div class="logo">G</div> 
      <div> 
        <a href=""><a href="#">Ссылка1</a></a> 
        <a href=""><a href="#">Ссылка2</a></a> 
        <a href=""><a href="#">Ссылка3</a></a> 
        <a href=""><a href="#">Ссылка4</a></a> 
        <a href=""><a href="#">Ссылка5</a></a> 
      </div> 
    </nav> 
  </div> 
</div>

Смотреть на весь Экран

Answer 2

Свойство background-image работает только в пределах своего блока. Поэтому вынести его за пределы блока нельзя.

Вы можете только добавить блок-обертку и указать background-image для него или на имеющийся родительский блок с шириной 100%.

Вы можете сделать главный контейнер на 100% ширину окна, а вложенные - бутстраповские

Еще можете пошаманить с псевдо-элементами :before, :after или доп блоками и свойсвами position: absolute, но это худший вариант, и лучше пересмотреть взгляд на верстку