Как вставить эти картинки background?

154

01 января 2021, 16:40

есть макет, верстаю по нему. сделать его нужно на сетке бутстрап, нарезал задний фон, а как вставить его не понимаю, как лучше его установить туда? создать div и сделать его нужной высоты, вставить туда картинку, а затем добавить туда контейнер и начать выставлять сетку в нём или как?

Answer 1

Не важно, бутстрап или нет, главное задавать фон всему блоку, к примеру к первому экрану. В нём уже создавать контейнер и дальше уже сам контент.

Вот пример, но только без бутстрапа.

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  font-family: 'Montserrat', sans-serif; 
} 
 
.container { 
  width: 640px; 
  margin: 0 auto; 
} 
 
.bg { 
  /* Вот эта секция с фоном */ 
  height: 500px; 
  background: url(https://images.unsplash.com/photo-1558429886-f2d4fa936469?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80) no-repeat center center 
} 
 
.menu { 
  padding-top: 2em; 
  list-style: none; 
  display: flex; 
  justify-content: space-between; 
} 
 
a { 
  color: white; 
  font-size: 1.2em; 
  text-decoration: none; 
} 
 
.cover { 
  margin-top: 4em; 
  font-size: 2em; 
  color: white; 
} 
 
.button { 
  margin-top: 1em; 
  padding: .5em 2em; 
  border: 1px solid #ffbb00; 
  color: #ffbb00; 
  font-size: 1em; 
  background: none; 
  transition: .3s; 
  cursor: pointer; 
} 
 
.button:hover { 
  background: #ffbb00; 
  color: black; 
}

<!-- Вот эта секция с фоном --> 
<section class="bg"> 
  <div class="container"> 
    <ul class="menu"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
    </ul> 
    <h1 class="cover"> 
      Hello, I'm cover text 
    </h1> 
    <button type="button" class="button">Touch</button> 
  </div> 
</section>