Stre
Stre

Reputation: 527

Background image gets cut off at bottom

I have a bg image for a div which itself is height and width 100% (i.e. it covers the entire browser window).

This image gets cut off the bottom though. I have already tried things like background-size: cover; and height: 100%; width: 100%. Nothing seems to stop the bottom being cut off. I tried resizing the src image itself making it tiny and the bottom is still cut off?

HTML:

<div id="des" class="full-window">
</div>

CSS:

#des {
    background: url("bg.png");
    background-size: 100% 100%;
}

.full-window {
    width: 100%;
    height: 100%;
}

Upvotes: 0

Views: 2157

Answers (1)

UI Xpider
UI Xpider

Reputation: 283

you are missing background properties to fit image without cutting. try this

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 1

Related Questions