2016-10-31 4 views
-2

の大きさによって異なる示しているが、私はなぜ知らない、それはCSSの画像の位置は、私は私のサイト、背景画像の上に画像を入れているモニター

(モニターのサイズによって)、別の人に違います例:私のPCで、それはこのように示しています

別のPC、モニターの異なるサイズで

、それは違っ表示されるでしょう。

なぜですか? 50%50%ノーリピートを追加しようとしましたが、動作しませんでした。

私は本当に何をすべきか分かりません。

CSS:

body {font-family:Arial, Sans-Serif; background-image: url("http://vestigedayz.com/Resurse/images/header-background.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

HTML

<body> 
.... 
</body> 

body {font-family:Arial, Sans-Serif; background-image: url("http://vestigedayz.com/Resurse/images/header-background.jpg"); 
 

 

 

 

 

 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}
<body> 
 
    </body>

+0

私が追加したコード。 これまでは、質問にCSSコードがありました。 –

+0

カバーを使用しているため、モニターの解像度によっては、画像がどのように見えるかによって異なります。たとえば、このフィドルでは、3つの部門が異なるモニター解像度であるように見せかけると、画像はそれぞれ異なって見えます。https://jsfiddle.net/yd39v79p/1/ – Pete

+0

これを修正するにはどうすればよいですか?

答えて

0

一つの解決策は、クラスにイメージタグを使用し、それはなるかもしれないが、以下のCSSを適用しています画像の寸法比がマットでない場合に歪んだそれはモニターのものです。

<img src="your/image/path.jpg class="your-image-class" /> 

次にCSS:切り取ら

body,html { 
    height: 100%; 
    width: 100%; 
} 

.your-image-class { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}