Image header CSS

-1

Ich habe ein kleines Problem damit, ein Bild in der Kopfzeile meiner Website zu sehen. Irgendeine Idee, wie man es zum Vorschein bringt? Die Bilddatei befindet sich auch im selben Ordner wie die HTML-Datei, daher weiß ich wirklich nicht, warum sie nicht angezeigt wird.Image header CSS

Hier ist die CSS-Datei:

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; 
}

Und hier ist die HTML-Datei:

<!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>

Quelle

2016-11-16 Tyler

wo machen, ist die

? – AVI

Es funktioniert völlig in Ordnung, wenn man Bezug auf Ihre header richtig

.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>

Quelle

2016-11-16 02:47:07 AVI

Vielen Dank! Ich wusste, dass das Problem einfach war! – Tyler

diese

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

Die Sache

Sie ist die background-image Lage zur CSS-Datei ist relativ Ort, der in einem css Ordner ist, so dass es nach der Datei sucht der Ordner css, während es einen Ordner nach oben schauen sollte (wo die Datei zusammen mit dem HTML ist). Auch sollte es in der body Selektor statt der header sein, da es das Hintergrundbild für den gesamten Körper sein wird, nicht die header, die überhaupt nicht in der HTML vorhanden ist.

Quelle

2016-11-16 02:44:13 mrinalmech

Image header CSS

Antwort

Verwandte Themen