Позиционирование изображения относительно фона - PullRequest
1 голос
/ 17 марта 2019

Я хочу, чтобы изображение было расположено так, чтобы его центр всегда располагался внизу синего фона. Это должно выглядеть так: enter image description here

Я могу использовать верх: 37v; но изменение высоты окна не позволит ему сохранить свое положение относительно фона.

.background{
    background-image: url("https://i.imgur.com/5Y5F5fF.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 100%;
    height: 50vh;
}
header img{
    position: relative;
    height: 100px;
    /*!*top: 37vh;*! Don't want to use this as resizing will effect its position relative to background*/
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
        <div class="container-fluid d-flex justify-content-center background">
            <img src="https://i.imgur.com/3dzn4KM.png" alt="phone">
        </div>

    </header>

Ответы [ 2 ]

1 голос
/ 17 марта 2019

Вы можете использовать комбинацию position: relative и absolute, например, так:

.background {
  background-image: url("https://i.imgur.com/5Y5F5fF.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 100%;
  height: 50vh;
  position: relative;
}

header img {
  position: absolute;
  height: 100px;
  bottom: -50px;
  /*!*top: 37vh;*! Don't want to use this as resizing will effect its position relative to background*/
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<header>
  <div class="container-fluid d-flex justify-content-center background">
    <img src="https://i.imgur.com/3dzn4KM.png" alt="phone">
  </div>

</header>
1 голос
/ 17 марта 2019

Добавьте эти 2 строки к стилю:

header img{
     position: relative;
     height: 100px;
     top:50%;
     margin-top:-50px;
 }

Это должно помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...