CSS Background Image is not showing up

Question

I know this is kind of a common question here on StackOverflow, but none of the previous answers I have seen are not working. I have this CSS code:

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

And then I have created this tag on an HTML file:

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

but the background image is not appearing. the html and css files are in the same folder in which backgroundheader.png is located.

• JasonB: Your css is looking for a class but your html specifies an id

Answer 1

You assigned id to header element and in css you defined property for header class.

Just change .header to #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>

or id='header' to class='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>

• Temani Afif: i edited you answer to make it more relevant with a working snippet since i found other answer getting upvoted but was irrelevant (and +1)

Answer 2

There are multiple ways of achieving this

1st Method:

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
}

2nd Method

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
}

3rd Method:

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
}

If it is

• class => .header
• id => #header
• header tag => header

• Temani Afif: you need to add some content in between header tags in order to display your image. : you are leading him in the wrong way. No need to add content, he's simply using bad selector, there is a height and width specified so no need content.
• Lakindu Gunasekara: I think you should try it out in some IDE, because it will not work without anything in between, true it is a bad selector, and even after that, the image won't show in the header tag. Better if you can recheck your edited answer, there are two steps to show the background image.
• Temani Afif: so you can check again the answer i edited .. i added an image and it's showing fine without any content ;) No need IDE or anything, Simple CSS logic = we have height/width = so we can see the div = so we can see the background image
• Lakindu Gunasekara: Thanks to Temani for correcting me on one point. No problem Lucas

Answer 3

You have declare a css class but used it as a id. So this css not working.

try this in html page

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

Answer 4

change your html:

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

or your selector:

[id="header"] 

or #header

BTW. If you have only one header you can write header as selector

You also can use body>header (for main header) etc. You probably do not need ids and classes.

BTW. You can remove this:

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

https://caniuse.com/#feat=background-img-opts all green!

Answer 5

u need to change from **class to id symbol :**

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