ページの上端と左端に背景画像があります

Question

私は大学の教科の一部として、かなり基本的なウェブサイトをまとめています。私は背景イメージを入れましたが、それはほぼ完全に適合します - しかし何らかの理由で私はイメージの上に白いマージン（厚さ約1インチ）と左に白いマージン（約0.5インチ）を持っています。

ここに画像のための私のCSSです：

#image { 

    width: 100% 100%; 
    position: fixed; 
    z-index: -9; 
    opacity: 0.8; 
    display: block; 
    background-size: cover; 
} 

私はちょうどこのように開いてbodyタグの後にHTMLで背景画像を配置している：

<img id="image" src="CourseworkImages/background2.jpg" alt="Background Image"> 

私は私が持っている理由はわかりませんこれらの余白はページ上にあり、ページの外観が損なわれています。

おかげ

Answer 1

代わりのあなたは、私はCSSを使用することをお勧めしているようimgタグを使用しました。次のようなものがあります。

この方法では、使用していた多くのプロパティを取り除くことができます。あなたが保持したいと思うものはbackground-sizeです。

他の人が指摘しているように、ほとんどのブラウザでは、不要な空白を作成するbody要素に余白の8pxが追加されています。これを削除するには、上記のCSSセレクタにmargin: 0;を追加してください。

---

不透明度を維持するために、私はボディに擬似要素を使用します。また、必要な不透明度を組み込んだPNGを作成することもできます.CSIを使用すると、少し柔軟になります。

body { 
 
    position: relative; 
 
    margin: 0; 
 
    min-height: 100vh; 
 
    background-color: hotpink; 
 
} 
 

 
body:before { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    opacity: 0.6; 
 
    background-image: url('http://placekitten.com/1600/1600'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

Answer 2

かなり基本的な例：

body { 
    margin: 0; 
    padding: 0; 
    border: 1px solid yellow; 
    border-right-style: none; 
    border-bottom-style: none; 
    width: 100%; 
    opacity: 0.8; 
    display: block; 
    background-size: cover; 
    background-image: url("CourseworkImages/background2.jpg"); 
} 

また、ラッパーのdivでそれを行うことができます。また、background-positionとrepeatプロパティで再生する必要があります。また、ブラウザのデフォルトマージンとパディングをリセットして、実際にはスペースを取らないようにする必要があります。私が言ったように、基本的な例。このトピックに興味があれば、cssフレームワークを見ることができます。これは、ブラウザで定義されたすべてのスタイルをリセットします。 g。 normalize.css