CODEWITHSUNDEEP
htmlcssbackground-imagecss-positiondisplay
Paul
Paul

Reputation: 1327

background image not showing properly

I am trying to set a background image for a header. This is what I want it to look like:

enter image description here

This is what I am getting:

enter image description here

So, a tiny weird strip at the bottom end. Here is my code:

html

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>title</title>

        <link rel="stylesheet" type="text/css" href="styles.css">
       <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="JavaScript2.js"></script>

    </head>
    <body>

    <div id="header">
          <nav class="cf" id="menu">
          <ul>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="gallery.html">FOLK</a></li>
            <li><a href="contact.html">JAZZ</a></li>
            <li><a href="shop.html">SIGNATURE</a></li>
            <li><a href="contact.html">NYLON</a></li>
            <li><a href="shop.html">CONTACT</a></li>
          </ul>
          </nav>
    </div>

      <div id="container">
        <div id="logo">
          <img id="rays" src="Images/PNGs/rayons.png">
          <img id="base" src="Images/PNGs/baseLogo.png">
          <img id="roue" src="Images/PNGs/roue.png">
          <img id="letters" src="Images/PNGs/title.png">
        </div>
      </div>

    <div id="footer">
    </div>
    <script type="text/javascript" src="JavaScript2.js"></script>
    </body>
</html>

css

html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;

}

#header {
    position: absolute;
    background-image: url("Images/menu.jpg");
    width: 100vw;
    height: 10vh;
    opacity: 1;
    z-index: 6;
    background-size: 100% 100px;
}

I have tried adding a size property to the background, like so:

background-size: 100% 100px;

And that's how I am getting the tiny strip at the bottom. Without that property I get nothing at all. Also, the header is not as long as the page although I have set the width at 100vw. Thanks of your time.

Upvotes: 0

Views: 1601

Answers (4)

meko
meko

Reputation: 121

I made some changes to your header: 

#header {
  /*position: absolute;*/
  background-image: url("Images/menu.jpg");
  /*width: 100vw;
  height: 10vh;
  opacity: 1;
  z-index: 6;*/
  background-size:cover;/*added this*/
  padding: 5px;/*added this*/
}

JSfiddle: https://jsfiddle.net/sg7dfpzj/

Hope that helps, cheerio!

Upvotes: 3

stodgy.nerd
stodgy.nerd

Reputation: 611

Where is your code for the class="cf" and id="menu" for the line <nav class="cf" id="menu"> in the body section of the HTML code?

There might be an error there. Check it out.

Upvotes: 0

Burhan Kashour
Burhan Kashour

Reputation: 677

Add a padding top and bottom for the header until you have all the image showing, the problem with empty spaces, you dont tell the browser how to show the image, add some more content or add a padding top and bottom.

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Remove height for #header Class

#header {
    position: absolute;
    background-image: url("Images/menu.jpg");
    width: 100vw;
    /*height: 10vh;*//*Remove this*/
    opacity: 1;
    z-index: 6;
    background-size: 100% 100px;
}

Upvotes: 1

Related Questions