バックグラウンドイメージのCSS位置divが応答します

Question

div背景にイメージが必要です。この画像には、1つのタイトル、サブタイトル、ボタンが必須です。

これらの3つの要素はすべて、動的な位置のために％で上と左を必要とします。

私はいくつか試しましたが、成功しませんでした。

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> 

jsffidleする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; 
} 

リンク：代わりに、個別に各要素を配置するhttps://jsfiddle.net/jggscada/

Answer 1

を、私はあなたがそれを#block1にposition:absoluteを与え、位置示唆第一にイメージ（#containerの背景イメージ）または#block1 divを囲む別のdivを作成します。

私はtop:40vh使用 - >vh=viewport height

をして、あなたが望むようblock1内の要素を配置します。

私は#link divを削除し、代わりにリンクに直接スタイルを追加しました。もっと論理的に思える:)。あなたはlinkがdiv使用display:blockのように動作する場合、このケースでは私は非常に重要display:inline-block

を使用：あなたが応答するために何かをしたい場合は、固定widthとheightを使用しないでください。私は.containerにwidth:100vwを使っていたので、画面の幅を持っていました。

は、下のスニペットを参照するか、こちらをいじる>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>