CODEWITHSUNDEEP
htmlcssbackground-image
Joseph W
Joseph W

Reputation: 11

HTML and CSS full image background

It seems that my full image isn't going all the way to the top.

html,body{
  height: 100%;
  width: 100%;
  color: #000;
  margin: 0;
  padding: 0;
}


.nav-bar{
 font-size: 30px;
 text-align:center;
 position:relative;
 font-family:navfont;
}

 .nav-bar > a{
  text-decoration: none;
 color: inherit;

}

.nav-bar a:hover{
  color:#FF0000;
}

.backgroundimg{
  background: url("../img/background.jpg");
  background-size: cover;
  position: relative;
  background-position: center center;
  height: 100%;
  width: 100%;
  z-index:-1;
}

My image

Upvotes: 0

Views: 202

Answers (1)

Mathieu Bour
Mathieu Bour

Reputation: 696

I think you should add the backgroundimg class to your <body> tag, because I'm pretty sure that you HTML markup is something like this :

<html>
    <head>
        ...
    </head>
    <body>
        <nav>
            ...
        </nav>
        <div class="backgroundimg">
            ...
        </div>
    </body>
</html>

And should be more like this :

<html>
    <head>
        ...
    </head>
    <body class="backgroundimg">
        <nav>
            ...
        </nav>
    </body>
</html>

Upvotes: 3

Related Questions