CODEWITHSUNDEEP
htmlcss
CSS Apprentice
CSS Apprentice

Reputation: 939

Background Image Too Large

I'm trying to make my background image always 100% width, but it's not working. With my current code, I get the picture where I want it, but there's a bunch of unwanted dead space (all the yellow background below pic). Overflow options don't fix this.

If I leave out the fixed height/width, then the image takes on 0x0 size for some reason; if I use background-size: cover, the image becomes too large, and no longer sits well in my parent container

jsFiddle: http://jsfiddle.net/CSS_Apprentice/z7bojmbn/1/

.mainpic {
    background-image: url('http://www.placehold.it/1922x1080');
    width: 1922px;
    height: 1080px;
    background-size: contain;
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
}

Upvotes: 1

Views: 6204

Answers (2)

Nick Salloum
Nick Salloum

Reputation: 2288

You might be interested in the cover declaration.

-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;

Upvotes: 1

snixtho
snixtho

Reputation: 185

You can simply do:

background-size: 100% 100%;

This will keep the background image stretched 100% to the size of the container it currently is in. So, if it is in the body, it will fill the whole background of the page.

Upvotes: 5

Related Questions