HTML/CSS 3偶数幅の背景画像

Question

私は自分のページに3つの背景画像を取得しようとしています。それらはページ全体に合っていなければならず、中央に配置する必要があります（写真が大きいので中央のみを表示する必要があります）。

私は3つのBootstrap colを使用しており、これらの画像を挿入しようとしました。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-4 picture-1"> 
    </div> 
    <div class="col-xs-4 picture-2"> 
    </div> 
    <div class="col-xs-4 picture-3"> 
    </div> 
    </div> 
</div> 

CSS：

.picture-1 { 
    background: url(images/home.jpg) no-repeat center center fixed; 
} 

私はそれをどのように行うのですか？

Answer 1

は、あなたがあなたの行と列に表ルールを適用することにより、レイアウトを微調整する必要があり

.picture-1 { 
    background: url(images/home.jpg) no-repeat center center; 
    background-attachment: fixed; 
    /* Center the background image */ 
    background-position: center; 
    /* Set the background image to no repeat */ 
    background-repeat: no-repeat; 
    /* Scale the background image to be as large as possible */ 
    background-size: cover; 
} 

Answer 2

このCSSを使用してください。

div[class^="picture"] { 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
} 
 
.picture-1 { 
 
    background-image: url("https://placehold.it/300x500/ff0000/00ffff?text=Col+1"); 
 
} 
 
.picture-2 { 
 
    background-image: url("https://placehold.it/300x500/00ff00/ff00ff?text=Col+2"); 
 
} 
 
.picture-3 { 
 
    background-image: url("https://placehold.it/300x500/0000ff/ffff00?text=Col+3"); 
 
} 
 
html, body, .container-fluid { 
 
    height: 100%; 
 
} 
 
.container-fluid { 
 
    display: table; 
 
    width: 100%; 
 
    margin-top: -50px; 
 
    padding: 50px 0 0 0; 
 
    box-sizing: border-box; 
 
} 
 
.container-fluid .row { 
 
    height: 100%; 
 
    display: table-row; 
 
} 
 
.container-fluid .row .no-float { 
 
    display: table-cell; 
 
    float: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="picture-1 col-xs-4 no-float"></div> 
 
    <div class="picture-2 col-xs-4 no-float"></div> 
 
    <div class="picture-3 col-xs-4 no-float"></div> 
 
    </div> 
 
</div>