イメージヘッダーCSS

-1

私のウェブサイトのヘッダーに画像が表示されるのに少し問題があります。どのようにそれを表示するにはどのようなアイデア？画像ファイルもhtmlファイルと同じフォルダにありますので、なぜそれが表示されないのか分かりません。ここでイメージヘッダーCSS

は、CSSファイルです：

header { 
width: 100%; 
background-image: url("background1.jpg"); 
text-align: center; 
padding: 5px; 
} 

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

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: deeppink; 
} 

li { 
float: left; 
} 

li a { 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover { 
background-color: pink; 
}

そして、ここでHTMLファイルです：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title>Welcome to Fazbear Entertainment</title> 
<link rel="stylesheet" href="css/fnaf.css"></link> 
<script type="text/javascript" src="js/fnaf.js"></script> 

</head> 

<body> 

</body> 

</html>

出典

2016-11-16 Tyler

への参照を行う場合には、完全に正常に動作しますか？ – AVI

あなたが

あるご header適切

.header { /* MODIFICATION */ 
 
width: 100%; 
 
background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/global/global-franchise-blue-header.jpg"); 
 
text-align: center; 
 
padding: 5px; 
 
} 
 

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

 
ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: pink; 
 
} 
 

 
li { 
 
float: left; 
 
} 
 

 
li a { 
 
display: block; 
 
color: white; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover { 
 
background-color: pink; 
 
}

<html lang="en"> 
 

 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Welcome to Fazbear Entertainment</title> 
 
<link rel="stylesheet" href="css/fnaf.css"></link> 
 
<script type="text/javascript" src="js/fnaf.js"></script> 
 

 
</head> 
 
<div class="header">  <!-- MODIFICATION --> 
 
    <h1>My website name</h1> 
 
</div> 
 
<body> 
 

 
</body> 
 

 
</html>

出典

2016-11-16 02:47:07 AVI

ありがとうございました！私は問題がシンプルであることを知っていた！ – Tyler

この

body { 
    margin: 0; 
    padding: 0; 
    background: white; 
    background-image: url("../background1.jpg"); 
}

事がbackground-image場所は、CSSファイルへの相対でありますかcssフォルダにある場所を検索していますcssフォルダーを探していて、フォルダーを1つ上に表示する必要があります（ファイルはhtmlに沿っています）。また、headerではなくbodyセレクタ内にある必要があります。headerではなく、本文全体の背景画像となるため、HTMLにはまったく存在しません。

出典

2016-11-16 02:44:13 mrinalmech

答えて

関連する問題