CODEWITHSUNDEEP
htmlcss
TimothyKA
TimothyKA

Reputation: 27

How to make my background image not get smaller when i make the window smaller?

my background image gets smaller when i make the webpage window smaller. Right now it isn't repeating (which is a steo forward), now i just need it to cover the full screen to not show white around the backgorund when window gets smaller.

body {
  margin: 0;
  padding: 0;
  background-color #333;
}


/*---Background Image---*/

body.home {
  background-image: URL("http://www.freepngimg.com/download/home/2-2-home-png-file.png");
  background-size: 100%;
  background-repeat: no-repeat;
  ` background-color: #333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
<body class="home">
  <section class="Navbar">
    <div>
      <header>
        <div>
          <a class="logo" href="Index.html">
            <img src="http://e-2103.jp/images/bt_nav_area_search.jpg" height="57.6px" width="190px">
          </a>
          <ul>
            <li><a class="active" href="Index.html">HOME</a></li>
          </ul>
        </div>
      </header>
    </div>
  </section>

Upvotes: 0

Views: 928

Answers (1)

Markie
Markie

Reputation: 131

The problem is that your body element is only as big as the content inside, so the background does not fill the entire window height.

To fix this, you could tell body to never be smaller than the window height, like so:

.body {
  min-height: 100vh;
}

See jsfiddle with this change: http://jsfiddle.net/L2ynhxcf/

You can remove min-height: 100vh; and you will see the body height shrinks back down to about 80px - and the problem appears again.

Upvotes: 1

Related Questions