バックグラウンドイメージが正しく整列していない

私がしようとしているのは、まずコンテナに背景イメージを与え、次にブートストラップのcol-md-6を使って2つのdivタグを作成することです。メインディビジョンの背景画像は芝生のテクスチャです。 2つのdivタグで、私はサッカーコートのスケルトンの背景イメージを与えています。だから私は1つのdivを1つのdivに与え、同じイメージを180に変換しています。しかし、それは期待通りには出ません。ここで何がうまくいかないのか分からない。バックグラウンドイメージが正しく整列していない

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<title></title> 
<style type="text/css"> 

.height{ 
width: 100%; 
min-height: 100vh; 
background-image: url(./turf2.jpg); 
} 
.left{ 
background-image: url(./court.png); 
background-size: 100% 100%; 
height: 768px; 
} 
.right{ 
background-image: url(./court.png); 
background-size: 100% 100%; 
height: 768px; 
transform: rotate(180deg); 
} 


</style> 


</head> 
<body> 

<div class="row height"> 

<div class="col-md-6 left"> 

</div> 
<div class="col-md-6 right"> 

</div> 
</div> 
</body> 
</html>

出典

2016-08-12 scripter

ブラウザのコンソールを使用して、そこから調整して正しい高さを確認してください。 –

イメージをホストすることができますか？ –

バックグラウンド位置：center center; – Nath

あなたは

.right { 
    background-image: url(./court.png); 
    background-size: 100% 100%; 
    height: 768px; 
    -webkit-transform:scaleX(-1); 
    -moz-transform:scaleX(-1); 
    -ms-transform:scaleX(-1); 
    -o-transform:scaleX(-1); 
    transform:scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
}

出典

2016-08-12 05:05:39

として書くことができますそれらが一致することを確認するためにもう一度あなたのイメージのサイズを確認してください。ここでは、同じ大きさの2つの画像を使用し、完全に整列していることを確認してください。

.height { 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    background-image: url(./turf2.jpg); 
 
} 
 
.left { 
 
    height: 200px; 
 
    background-image: url('http://placehold.it/200x200'); 
 
    background-size: 100% 100%; 
 
} 
 
.right { 
 
    height: 200px; 
 
    background-image: url('http://placehold.it/200x200'); 
 
    background-size: 100% 100%; 
 
    transform: rotate(180deg); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div class="row height"> 
 
    <div class="col-xs-6 col-md-6 left"> 
 
    </div> 
 
    <div class="col-xs-6 col-md-6 right"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-08-12 05:07:59 Srijith

私は単純な画像で置き換え、あなたのコードを変更しませんでした。それはうまくいくかもしれません、court.pngファイルの寸法をチェックしてください。

my image file

test result

出典

2016-08-12 05:34:51 pepperpapa

まずその代わりに、あなたが行クラスの下に自分のクラスを追加する必要があり、他のクラスとブートストラップ行クラスを使用するには、非常に悪い習慣。ここでは、イメージを完全に整列させる方法を紹介します。コードのhtml部分を変更して、それをフォローするだけです。

<body> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div class="height"> 
     <div class="col-md-6 left"> 

     </div> 
     <div class="col-md-6 right"> 

     </div> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 
</body>

出典

2016-08-12 05:56:40 Navnit

バックグラウンドイメージが正しく整列していない

答えて

関連する問題