background html css

158

22 августа 2018, 06:30

Всем привет. Я добавил bg к header. И по макету нужно, чтобы нижняя часть телефона уходила за границы header. Я это сделал, но bg не просто кончается, а начинается как бы новый) Я делал no-repeat и bg просто пропадает, подскажите, что делать? Заранее спасибо

Answer 1

Добавьте background-size:

background-size: cover;

Answer 2

Примерно так.

* { 
  margin: 0; 
  padding: 0; 
} 
 
.header { 
  width: 100%; 
  height: 1px; 
  display: table; 
  background: yellow; 
  padding: 1rem; 
} 
 
.left-col { 
  float: left; 
  width: 50%; 
} 
 
.right-col { 
  float: right; 
  width:50%; 
} 
 
.img { 
  background: blue; 
  width: 100px; 
  height: 200px; 
  position: absolute; 
}

<div class="header"> 
  <div class="left-col"> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam impedit similique id dignissimos nobis sed iste temporibus veniam facere, ipsa ea harum reprehenderit maxime sapiente! Repellendus doloribus itaque consectetur ducimus? 
  </div> 
  <div class="right-col"> 
    <div class="img"></div> 
  </div> 
</div>