<body>をマージンと背景画像で使用する場合

marginとbackground-imageと一緒に使用すると、通常の<div>と<body>の動作はまったく異なります。予想通り<body>をマージンと背景画像で使用する場合

ノーマル<div>作品（marginは、コンテンツの一部ではないので、何の背景画像がmarginに表示されません）：

div { 
 
    background: url("http://www.w3schools.com/cssref/img_flwr.gif"); 
 
    background-size: auto; 
 
    background-position: top left; 
 
    background-repeat: no-repeat; 
 
    padding-top: 40px; 
 
    border:1px solid black; 
 
    margin:60px; 
 
}

<div> 
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
<p>Original image: <img src="http://www.w3schools.com/cssref/img_flwr.gif" alt="Flowers" width="224" height="162" /></p> 
 

 
<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p> 
 
</div>

はしかし、marginはの一部であるように思われますコンテンツが<body>になり、予期せぬ予期しない余白に背景画像が表示されます。

body { 
 
    background: url("http://www.w3schools.com/cssref/img_flwr.gif"); 
 
    background-size: auto; 
 
    background-position: top left; 
 
    background-repeat: no-repeat; 
 
    padding-top: 40px; 
 
    border:1px solid black; 
 
    margin:60px; 
 
}

<body> 
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
<p>Original image: <img src="http://www.w3schools.com/cssref/img_flwr.gif" alt="Flowers" width="224" height="162" /></p> 
 

 
<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p> 
 
</body>

出典

2016-05-14 J.Joe

私は、このエラーの背後にある本当の理由を知っているが、トリッキーな解決策を持っていません。は

 background-position: top 70px left 70px;//change the value as you want

あなたのCSSにこれを与えるCSS

body { 
    background: url("http://www.w3schools.com/cssref/img_flwr.gif"); 
    background-size: auto; 
    background-position: top 70px left 70px; 
    background-repeat: no-repeat; 
    padding-top: 40px; 
    border:1px solid black; 
    margin:60px; 
}

出典

2016-05-14 12:53:55 Atula

あなたは<html>要素の背景を設定しない場合は、body要素の背景がキャンバスに伝播されます。あなたが望んでいなければ、html要素の背景を設定するだけです。正式html { background-color: white; }

すなわち

、ルート要素HTML "HTML" 要素または '透明' の値を計算したXHTML "HTML" 要素である文書についてはCSS spec says

...利用者エージェントは、その背景の背景を描画するときに、その要素の最初のHTML「BODY」要素またはXHTML「body」要素の子からのバックグラウンドプロパティの計算値を代わりに使用する必要がありますその子要素の背景をペイントしてはいけません。そのような背景は、ルート要素だけを塗りつぶした場合と同じポイントに固定する必要があります。

html { 
 
    background-color: white; 
 
} 
 

 
body { 
 
    background: url("http://www.w3schools.com/cssref/img_flwr.gif"); 
 
    background-size: auto; 
 
    background-position: top left; 
 
    background-repeat: no-repeat; 
 
    padding-top: 40px; 
 
    border:1px solid black; 
 
    margin:60px; 
 
}

<body> 
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
<p>Original image: <img src="http://www.w3schools.com/cssref/img_flwr.gif" alt="Flowers" width="224" height="162" /></p> 
 

 
<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p> 
 
</body>

出典

2016-05-14 13:57:14 Alohci

<body>をマージンと背景画像で使用する場合

答えて

関連する問題