divのHTML画像がボディを完全に埋めない

私のページの背景として画像（jpg）を使いたいです。divのHTML画像がボディを完全に埋めない

これは私が問題に取り組もうとした方法です： body内にbodyを作成し、bodyの中にid backgroundWallpaperのdivを入れてください。 div内に画像を配置します。問題は、サイト（水平）と上部に完全に埋められていますが、下部には画像とブラウザの間に小さな隙間があります。私はあなたにギャップを実証するために体の背景を紅色の赤に変えました。私はブラウザとしてSafariの最新バージョンを使用しています。この私のコードです：index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>name</title> 
    <linkrel="stylesheet" 
    href"http://meyerweb.com/eric/tools/css/reset/reset.css"> 
    <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 
    <div id="backgroundWallpaper"> 
    <img src=".../img/1.jpg" alt="image could not be loaded"> 
    </div> 
    </body> 
</html>

これは私のcssファイル

body { 
background: crimson; 
margin: 0; 
padding: 0; 
} 

#backgroundWallpaper img { 
max-width: 100%; 
}

出典

2017-03-29 hudumudu

背景画像をCSSに入れないのはなぜですか？ divなどを使用する理由はありますか？ –

合意、html要素の背景として画像を使用してください – mayersdesign

どうすればよいですか？私は外部フレームワークを使用したくありません... – hudumudu

画像ブロック要素を作るために、画像のためのコードの下使用され、画像がデフォルトのインライン要素であり、そのいくつかの属性を持っています。なぜあなたは余分なスペースを得るのですか？

私はそれがあなたを助けてくれることを願っています。

出典

2017-03-29 12:36:58

ありがとう！これは私のために働いた。なぜこれが正確に機能し、私のバグは何だったのか私に説明できますか？私はWeb開発者にはかなり新しいですし、以前はpythonと迅速でした。 – hudumudu

また、あなたはそれに 'height：100％;'も与えてくれるとアドバイスしています。 –

@hudumuduはあなたを助けてくれます。あなたは更新を確認することができます。 –

あなたはmax-width: 100%;を使用していますが、画像がDIVよりも小さい場合はDIVを埋め込むことはありません。 width: 100%を使用してください。それでも、元の割合で留まることになるので、ハイゲートが窓の高さを満たすことは保証されません。

ベターbodyのための背景画像として画像を使用することで、私はhtmlファイルに直接CSSファイルを追加するとき、それは

出典

2017-03-29 12:39:50 Johannes

、私はFirefoxやChromeで空白が表示されていないためbackground-size: coverを設定するだろうが画像を読み込めないことがわかりました。写真のサイズはどれくらいですか？写真の寸法がなければ、解決するのが難しいかもしれません。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>name</title> 
 
    <linkrel="stylesheet" 
 
    href"http://meyerweb.com/eric/tools/css/reset/reset.css"> 
 
    <link rel="stylesheet" href="main.css"> 
 
    </head> 
 
    <body> 
 
    <div id="backgroundWallpaper"> 
 
    <img src=".../img/1.jpg" alt="image could not be loaded"> 
 
    </div> 
 

 
<style> 
 
body { 
 
background: crimson; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#backgroundWallpaper img { 
 
max-width: 100%; 
 
} 
 
</style> 
 
    </body> 
 
</html>

出典

2017-03-29 12:40:15

そのあなたがしたときの画像を表示したくない場合はhere

body { 
 
background: crimson; 
 
margin: 0; 
 
padding: 0; 
 
background: url(http://placehold.it/350x150) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

出典

2017-03-29 12:44:15

を説明したようにあなたは正しく収まるようにバックグラウンドを使用することができますページを下にスクロール

#backgroundWallpaper{ 
    background-image: url(...); 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100vh; /* viewport height */ 
}

出典

2017-03-29 12:49:44

divのHTML画像がボディを完全に埋めない

答えて

関連する問題