CSSの背景画像が表示されない

Question

これはStackOverflowのよくある質問ですが、私が見た以前の回答はうまくいきません。

.header{ 
    padding: 0px 0; 
    position: relative; 
    display: table; 
    background-size: 100% 100%; 
    width: 1920px; 
    height: 600px; 
    background-image: url(backgroundheader.png); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover 

} 

そして私は、HTMLファイルにこのタグを作成しています：

<header id = "header"> 

</header> 

が、背景画像が表示されない私は、このCSSコードを持っています。 htmlとcssファイルは、backgroundheader.pngがある同じフォルダにあります。

Answer 1

この

第一の方法達成するための複数の方法があります。

HTMLは

<header class = "header"> 
</header> 

CSS

.header{ 
    padding: 0px 0; 
    position: relative; 
    display: table; 
    background-size: 100% 100%; 
    width: 1920px; 
    height: 600px; 
    background-image: url(backgroundheader.png); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover 

} 

第二の方法

HTML

<header id = "header"> 
</header> 

CSS

#header{ 
    padding: 0px 0; 
    position: relative; 
    display: table; 
    background-size: 100% 100%; 
    width: 1920px; 
    height: 600px; 
    background-image: url("backgroundheader.png"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover 
} 

第三の方法：

HTML

<header> 
</header> 

CSS

header{ 
    padding: 0px 0; 
    position: relative; 
    display: table; 
    background-size: 100% 100%; 
    width: 1920px; 
    height: 600px; 
    background-image: url(backgroundheader.png); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover 
} 

それは

ある場合

• クラス=> .header
• ID =>＃ヘッダー
• ヘッダタグ=>ヘッダ

Answer 2

idをヘッダ要素に割り当て、cssでヘッダクラスのプロパティを定義しました。

だけ#headerclass='header'へ

#header { 
 
    padding: 0px 0; 
 
    position: relative; 
 
    display: table; 
 
    background-size: 100% 100%; 
 
    width: 1920px; 
 
    height: 600px; 
 
    background-image: url(https://lorempixel.com/1000/1000/); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover 
 
}

<header id="header"> 
 

 
</header>

またはid='header'へ.headerを変更します。

.header { 
 
    padding: 0px 0; 
 
    position: relative; 
 
    display: table; 
 
    background-size: 100% 100%; 
 
    width: 1920px; 
 
    height: 600px; 
 
    background-image: url(https://lorempixel.com/1000/1000/); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover 
 
}

<header class="header"> 
 

 
</header>

Answer 3

あなたはCSSクラスを宣言有するが、IDとしてそれを使用しました。 このCSSは機能しません。

は、HTMLページに

<header class= "header"> 

</header> 

Answer 4

変更あなたのhtmlを、これを試してみてください。

<header class = "header"> 

</header> 

たり、セレクター：ところで

を

[id="header"] 

または ＃ヘッダー。ヘッダが1つしかない場合は、セレクタとしてheaderと書くことができます。

また、body>header（メインヘッダ用）なども使用できます。おそらくIDとクラスは必要ありません。

BTW。

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 

https://caniuse.com/#feat=background-img-optsすべての緑： あなたはこれを削除することができます！

Answer 5

uは**クラスへのidシンボルから変更する必要があります：**

#header { 
    ..... 
} 
<header id="header"> 

</header>