2016-11-05 13 views
0

次のコードでは、画像を画面の中央に配置できません。バックグラウンド位置のプロパティが画像を中央に配置できません

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
     body{ 
      background-image: url("../images/dandelion.jpg"); 
      background-repeat: no-repeat; 
      background-position: center center; 
     } 
    </style> 
</head> 
<body> 


</body> 
</html> 

これは私が得ているものです。そのが実際に正しく中心になるよう

enter image description here

+0

あなたの質問を具体的にしてください。 –

+0

イメージを中央に配置したい – Cody

+2

これはあなたが得ているものです。体の高さはあなたが期待するものではなく、画像を整列させるために使用されているものです。あなたの体の高さを設定すると、私は何を意味するかを確認する必要があります。 – GillesC

答えて

1

あなたbodyは、その中のものと同じくらい背が高いです。

あなたが望む結果を得るには、あなたがそれに物事を追加することによって、長い実際のページを作成するか、またはこれを回避する必要があります:あなたはそこにHTMLを持っている必要があり

html,body{ height:100%; } 

注あまりにので高さは、親からの相対である割合(<html>、この場合には<body>の親である)

0

uはこのfiddle

body{ 
 
    background-image: url("http://i.imgur.com/InDshke.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center -25%; 
 
    background-size: 50%; 
 
    height: 100%; 
 
    width:100%; 
 
}
のようなものを試してみたいことがあります

0

チェックアウトこのFiddle(jsFiddle)。

デフォルトのプロパティをリセットし、<html><body>などのコンテナがその内部のコンテンツ(この場合は画像)に従って調整されるように、これらのスタイルを指定する必要があります。

これらのスタイルを適用します。

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

body { 
    margin: 0; 
    background-image: url("http://placehold.it/200x200"); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

・ホープこのことができます!

0

htmlとbodyの高さを100%、背景の位置を50%50%またはcenter centerに指定します。

html { 
    height: 100%; 
} 
body{ 
    background-image: url("http://i.imgur.com/InDshke.png"); 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    height: 100%; 
} 
関連する問題