私は自分のバックグラウンドを心配しています。私はそれを中心にするためにBGを小さなサイズに変更するかどうかはしません。CSSバックグラウンド位置が中央にならない
彼女は私のCSSです：
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center center;
height: 1813px;
width: 1024px;
}
それは背景をセンタリングしません - それはさらに小さいサイズの写真を使用しているが、モニターの左上にいっています。皆さん、ありがとうございました！
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
あなたができることは、divを作ってimgを入れて、-1z-indexを使ってdivを中心に置くことです。
コンテナがフルビューポートのサイズではないかもしれませんので、あなたも
body {
min-height: 100%;
}
を追加してみてください。
お時間をいただきありがとうございます。私はz-indexを置いてみませんでした。私の解決策は、マージンをオートにしていました。 – artoo
背景画像を集中化するには、中心中心を2回指定する必要はありません。これは次のようにする必要があります：あなたは、バックグラウンドの中央に正確に画像が表示されます幅を削除する場合
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center;
height: 1813px;
}
これは本当に問題**への答えではありません**これはセンター/センターを指定するための*オプションのメソッド*です（センターセンターまたはセンターは有効なオプションです） –
最初に、センターは依然として動かない。しかし、私は今マージンを入れて解決策を持っています：自動;任意の解像度で自動的に中央に表示されます。あなたの返事に感謝します。 – artoo
あなたのコードは、のようにaspected作品...
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#container {
background-image: url('http://supermario3dworld.nintendo.com/_ui/img/views/power-ups/char-dobble-mario.png');
background-repeat: no-repeat;
background-position: center; /* you dont need to specify the value two times */
height: 1813px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
あなたが期待するようあなたのコードが動作します。おそらくCSSルールが違って干渉しているかもしれません。 –
問題は、**あなたのCSSが読み込まれていない**、**または他のマークアップ/スタイルと競合している**のいずれかです。 [this jsFiddle]（https://jsfiddle.net/cale_b/r3fpg8nn/）で、あなたのCSSが正常に動作することがわかります。最初に –
私はまだ1つの 'センター'を置いていないdoesnt仕事。しかし私は今マージンを入れて解決策を持っています：自動;任意の解像度で自動的に中央に表示されます。あなたの返事に感謝します。 – artoo