CODEWITHSUNDEEP
htmlcss
Vishnuprasad
Vishnuprasad

Reputation: 113

unable to set header background using css

I am learning Html5 and Css3. I am trying to create a layout, where I need to apply background image to the header. I think I have marked all the tags correctly but it doesn't seem to work. please help me. I don't get it where I am going wrong ?

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>HOME</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <header>

      </header>
    </div>
  </body>
</html>

css3

body
{
    margin:0;
}
.container
{
    width: 960px;
    height: 1000px;
    border: 1px solid black;
    margin:0 auto;
}

header
{
    height: 202px;
    border: 1px solid;
    background-repeat: no-repeat;
    margin: 0;
    background-image: url(images/header.png);
}

Upvotes: 0

Views: 122

Answers (2)

John Slegers
John Slegers

Reputation: 47081

Either your path is incorrect or there's something wrong with its file permissions.

Note that your path should be relative to whatever folder your CSS file is in (and NOT your HTML file). The most likely cause of your issue, is that you made your URL relative to your HTML file instead of your CSS file!

Anyway, if I replace the URL with another image path (that I know to be correct), your code works fine :

body {
    margin:0;
}

.container {
    width: 960px;
    height: 1000px;
    border: 1px solid black;
    margin:0 auto;
}

header {
    height: 202px;
    border: 1px solid;
    background-repeat: no-repeat;
    margin: 0;
    background-image: url("https://i.sstatic.net/mRsBv.png?s=328&g=1");
}
<div class="container">
  <header>

  </header>
</div>

Note :

Some browsers may have issues if your leave out the quotes around the URL, but if you're using Chrome or Firefox, it should work regardless of whether you use quotes.

Upvotes: 1

Jin Ming - 金明 - 김명
Jin Ming - 金明 - 김명

Reputation: 75

Check the image file name's extension.

May be the extension part is in uppercase format like "header.PNG", instead of "header.png".

Upvotes: 0

Related Questions