Tyler Tyler - 18 days ago 5
CSS Question

Image header CSS

I'm having a bit of a problem getting an image to show up in the header of my website. Any idea on how to get it to show up? The image file is also in the same folder as the html file so I really don't know why it's not showing up.

Here's the CSS file:

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


And here's the HTML file:

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

Answer

It works perfectly fine, if you make reference to your header properly

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

Comments