Позиционирование изображения по отношению к фоновому изображению

Question

Новое в стиле CSS. У меня есть отзывчивое фоновое изображение на моей странице, и я хочу иметь круговой логотип, расположенный в нижнем центре его. Я хочу, чтобы этот образ оставался в том же положении (по отношению к нижней части фонового изображения) независимо от того, насколько маленький/большой вид.

Я играл с заполнением и позиционированием изображений, но ни один из них не реагирует. Когда экран меньше, изображение перемещается вверх. Когда оно больше, изображение перемещается вниз. Я хочу, чтобы он остался в том же положении.

Вот быстрая скрипка моей последней попытки:

https://jsfiddle.net/ybeuvn9m/

И код:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="splash col-sm-12"> 
     <div class="photo"> 
     <img class="img-responsive img-circle logo" src="http://i.imgur.com/Dum5A8J.png"> 
     </div> 
    </div> 
    </div> 
</div> 

.logo { 
    padding-top: 200px; 
    width: 10%; 
    margin: 0 auto; 
    display: block; 
} 

.splash { 
    background: url('http://s169923.gridserver.com/images/IntelligentsiaMocha.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50vh; 
    background-color: rgba(0, 0, 0, 0.2); 
    background-blend-mode: overlay; 
} 

Answer 1

Если я правильно понимаю, вы хотите, чтобы .photo всегда находился в центре .splash. Для этого вам следует использовать Flex-box.

добавить следующую строку в ваш код:

.parentDiv{ 
    display: flex; 
    justify-content: center; 
    align-items: center: 
} 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... для справки.

Answer 2

Вы, вероятно, хотите, чтобы абсолютно позиционировать его внутри основного изображения DIV. Вот модифицированная версия вашего JSFiddle: https://jsfiddle.net/jameson5555/ybeuvn9m/1/

Вот обновленные стили .logo. Вам также нужно добавить position: relative в ваш контейнер, чтобы сделать .logo положение относительно этого.

.logo { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 40px; 
    margin-left: -20px; 
    display: block; 
} 

Answer 3

.logo { 
     padding-top: 150px; 
     width: 110px; 
     margin: 0 auto; 
     display: block; 
     } 

Ваш логотип должен иметь постоянную ширину вашего логотипа.