Я хочу, чтобы изображение было расположено так, чтобы его центр всегда располагался внизу синего фона. Это должно выглядеть так:
Я могу использовать верх: 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>
Вы можете использовать комбинацию position: relative и absolute, например, так:
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*/ }
Добавьте эти 2 строки к стилю:
header img{ position: relative; height: 100px; top:50%; margin-top:-50px; }
Это должно помочь.