CODEWITHSUNDEEP
htmlcss
Lucas Leal
Lucas Leal

Reputation: 245

CSS Background Image is not showing up

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.

Upvotes: 0

Views: 318

Answers (5)

Mamun_007
Mamun_007

Reputation: 21

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>

Upvotes: 1

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

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

Upvotes: 1

Mahmod Abu Jehad
Mahmod Abu Jehad

Reputation: 177

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

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

</header>

Upvotes: -1

Pradeep Rajput
Pradeep Rajput

Reputation: 725

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>

Upvotes: 2

18C
18C

Reputation: 2110

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!

Upvotes: 0

Related Questions