複数のdivの背景イメージを設定するにはどうすればよいですか？

Question

私はいくつかのサービスを表示するには、4つのdivタグを使用しています：

私は、この例のように4枚の画像の背景画像を使用したい：

http://de.wix.com/website-template/view/html/1326?originUrl=http%3A%2F%2Fde.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F1&bookName=create-master-new&galleryDocIndex=0&category=all&metaSiteId=

はどのように行うことができますそれ？解像度は反応的でなければならないので、画像を切り取るために切り抜きツールを使用することはできません。応答画像の場合

Answer 1

は、それが実際position: absoluteと遊びです更新Demo

です。同じようにして与えられたサンプルサイト。その実際<img>タグではなく、背景ここ

はコード：

.container{ 
 
\t max-width: 600px; 
 
\t position: absolute; 
 
\t top: 10px; 
 
} 
 
img{ 
 
\t max-width: 600px; 
 
} 
 
.divider{ 
 
\t width: 10px; 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t height: 100%; 
 
\t background: white; 
 
} 
 
.one{ 
 
\t left: 150px; 
 
} 
 
.two{ 
 
\t left: 300px; 
 
} 
 
.three{ 
 
\t left: 450px; 
 
}

<div class="container"> 
 
\t <img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt=""> 
 
\t <div class="divider one"></div> 
 
\t <div class="divider two"></div> 
 
\t <div class="divider three"></div> 
 
</div>

Answer 2

私は、ブートストラップをしようとするあなたをお勧めします：

http://www.w3schools.com/bootstrap/bootstrap_images.asp

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

それとも、リンクをたどって、それを行うには、CSSを使用することができます。 http://www.w3schools.com/css/css_rwd_images.asp

Answer 3

この例では、divは透過的です背景画像を輝かせてください。

4つのウィンドウがあるとします。あなたはそれらのすべての背後にある一つの巨大な絵を置くそれがこれらのことです。

「バックグラウンド：透過」の値についてさらに調査して、経験を得ることができます。ここで

Answer 4

ちょうどあなたがこの方法を使用することができ、おそらく助け

*,:before,:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 400px; 
 
} 
 

 
.container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.divider { 
 
    width: 25%; 
 
    border: 10px solid #fff; 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    top: 0px; 
 
    height: 100%; 
 
} 
 

 
.btn { 
 
    background: green; 
 
    color: white; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 3em; 
 
    padding: 1em; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
\t <img src="https://static.wixstatic.com/media/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg/v1/fill/w_880,h_500,al_c,q_85/b2c0a7_a44d01e99b665e19effb29e4fc36ded3.jpg" alt=""> 
 
\t <div class="divider one"><a class="btn" href="#">Button</a></div> 
 
\t <div class="divider two"><a class="btn" href="#">Button</a></div> 
 
\t <div class="divider three"><a class="btn" href="#">Button</a></div> 
 
\t <div class="divider four"><a class="btn" href="#">Button</a></div> 
 
</div>

Answer 5

これははるかに反応の良い解決策です。それは応答するdiv（列とバナー）と背景を持っています。サンプルのウェブサイトとは異なり、コンテナは固定幅ではありません。

https://jsfiddle.net/Lqzqo5xf/

また、画面が.wrapperクラスにmin-widthプロパティを適用することによって、一定の大きさに縮小されたときに一定の幅であることがコンテナを設定することができます。

あなたが指定した例の場合と同様に、ディバイダ（白い列）のdivと、背景とコンテナが重なった別のコンテナが必要です。また、除算器の絶対位置を使用しますが、応答性のためにパーセンテージを使用します。

.wrapper { 
 
    width: 100%; 
 
    height:400px; 
 
    margin:0; 
 
    padding:0; 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 

 
#bg-wrapper { 
 
    background-image: url('http://www.gstatic.com/webp/gallery/1.jpg'); 
 
    background-size: cover; /** Also try "contain" **/ 
 
} 
 

 
.banner { 
 
    float: left; 
 
    margin-top: 70px; 
 
    width: 25%; 
 
    height: 50px; 
 
    background-color: rgba(0,0,0,0.7); 
 
    vertical-align:middle; 
 
    text-align: center; 
 
    color:white; 
 
} 
 

 
.divider { 
 
    position: absolute; 
 
    width:2%; 
 
    height: 100%; 
 
    background-color: white; 
 
    margin: 0 0 0 -1%; 
 
    padding: 0; 
 
}

<div class="wrapper" id="bg-wrapper"> 
 
    <div class="banner"> 
 
     <h4> 
 
     willkommen 
 
    </div> 
 
    <div class="banner"> 
 
     <h4> 
 
     willkommen 
 
    </div> 
 
    <div class="banner"> 
 
     <h4> 
 
     willkommen 
 
    </div> 
 
    <div class="banner"> 
 
     <h4> 
 
     willkommen 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="divider" style="left:25%;"> 
 
    </div> 
 
    <div class="divider" style="left: 50%;"> 
 
    </div> 
 
    <div class="divider" style="left:75%;"> 
 
    </div> 
 
</div>