CODEWITHSUNDEEP
htmlcssimagebackgroundwhitespace
user3375665
user3375665

Reputation: 63

Background image not covering full screen

I'm building an one page scroll down type website, where each slide is a page. In the last slide, the background image is somehow geting cuted and there's just a white space. The css used on the id of that slide: 

#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }

Here's a print: http://postimg.org/image/489mxfagt/

Any solutions?

Upvotes: 0

Views: 13878

Answers (4)

Raji M M
Raji M M

Reputation: 1

Just add .bgwidth { width: 100%; } .bgheight { height: 100%; }

this will eliminate issue

Upvotes: 0

Sarath Babu Nuthimadugu
Sarath Babu Nuthimadugu

Reputation: 881

using css background image 

 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;
    }

else you can try some other way below code works fine from ie7

css code

#bg {
position: fixed;
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%;
}

 #bg img {
position:absolute;
top:25%;left:25%; 
right:25%;bottom:25%;
margin:auto; 
min-width:50%;
min-height:50%;}

html code

<div id="bg">
  <img src="images/Body-bg.png" alt="">
</div>

Upvotes: 0

lindsay
lindsay

Reputation: 972

If you're supporting modern browsers, you can do the following.

#seven {
    background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}

Alternatively, you can put your image in an img tag within a container, position the container using either fixed or absolute positioning. Next, give it a width of 100% and height of 100% or top, left, right, bottom a value of 0, while hiding the overflow. Lastly, set the img width to width: auto and height: 100% with display: block.Example here.

Upvotes: 0

volter9
volter9

Reputation: 735

You can use background-scale property:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Upvotes: 1

Related Questions