CSS позиция div над фоном изображение отзывчивое

Question

Мне нужно иметь изображение на фоне div. По этому изображению необходимо иметь один заголовок, субтитр и кнопку.

Все эти три элемента должны иметь верхнее и левое положение в% для динамического положения.

Я сделал несколько попыток, но безуспешно.

HTML

<div id="container"> 
    <div id="block1"> 
     <div id="title">LIAM</div> 
     <div id="subtitle">SUPER SLIM FIT</div> 
     <div id="link"> 
      <a href="#"> See all jeans</a> 
     </div> 
    </div> 
</div> 

CSS

#block1 { 
    background-image: url('http://tiffosi.com/fw16/img/img1.jpg'); 
    background-repeat: no-repeat; 
    background-size: contain; 
    width: 100%; 
    height: 1450px; 
    max-width: 1086px; 
    max-height: 1450px; 
    position: relative; 
    top: 0; 
    left: 0; 
} 

#block1 #subtitle { 
    font-size: 16pt; 
    color: white; 
    position: absolute; 
    top: 23.4%; 
    left: 43.5%; 
    letter-spacing: 1px; 
} 

#block1 #link { 
    width: 184px; 
    text-align: center; 
    height: 43px; 
    line-height: 43px; 
    border: 1px solid white; 
    font-size: 11pt; 
    top: 29.3%; 
    left: 41.3%; 
    position: absolute; 
} 

#block1 #link a { 
    color: white; 
    text-decoration: none; 
    font-weight: 100; 
} 

@media only screen and (min-width : 768px) { 
    #block1 #title{ 
     top: 12%; 
     left:42%; 
     font-size:80%; 
    } 
} 

@media only screen and (min-width : 992px) { 
    #block1 #title { 
     font-size: 100%; 
     position: absolute; 
     top: 16.5%; 
     left: 42%; 
     letter-spacing: 2px; 
    } 
} 

#block1 #title { 
    font-size: 97px; 
    color: white; 
    position: absolute; 
    top: 16.5%; 
    left: 42%; 
    letter-spacing: 2px; 
} 

Ссылка на jsffidle: https://jsfiddle.net/jggscada/

Answer 1

вместо позиционирования каждого элемента в отдельности, я предлагаю вам position:absolute в #block1 и расположите его на e изображение (изображение в качестве фона для #container или сделать другой div, окружающий #block1 div).

я использовал top:40vh ->vh=viewport height

, а затем расположить элементы внутри block1, как вы хотите.

также я удалил div #link и добавил стили непосредственно к ссылке. Кажется более логичным этот путь :). если вы хотите link вести себя как divdisplay:block использования, в данном случае я использовал display:inline-block

ОЧЕНЬ ВАЖНО: не используйте фиксированный width и height, если вы хотите что-то реагировать. я использовал width:100vw на .container, поэтому он имеет ширину экрана.

см фрагмент ниже или скрипку здесь>Jsfiddle

дайте мне знать, если он работает для вас

#container { 
 
    background-image: url('http://tiffosi.com/fw16/img/img1.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    width: 100vw; 
 
    height: 1450px; 
 
    max-width: 1086px; 
 
    max-height: 1450px; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    border: 1px solid red; 
 
    } 
 

 
    #block1 #title { 
 
    font-family: oswald-bold; 
 
    font-size: 60pt; 
 
    color: white; 
 
    letter-spacing: 5px; 
 
    } 
 

 
    #block1 #subtitle { 
 
    font-family: oswald-bold; 
 
    font-size: 16pt; 
 
    color: white; 
 
    letter-spacing: 1px; 
 
    } 
 

 
    #block1 a{ 
 
    width: 184px; 
 
    text-align: center; 
 
    height: 43px; 
 
    line-height: 43px; 
 
    border: 1px solid white; 
 
    font-family: Oswald-Medium; 
 
    font-size: 11pt; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-weight: 100; 
 
    display:inline-block; 
 
    margin-top:50px; 
 
    } 
 

 
    
 

 
    
 
    #block1 { 
 
    position:absolute; 
 
    top:40vh; 
 
    left:0; 
 
    margin:0 auto; 
 
    right:0; 
 
    text-align:center; 
 
    }

<div id="container"> 
 
    <div id="block1"> 
 
     <div id="title">LIAM</div> 
 
     <div id="subtitle">SUPER SLIM FIT</div> 
 
     <a href="#"> See all jeans</a> 
 

 
    </div> 
 
</div>