CSS background image issue

Question

So I have a wrapper div with a background image that covers the whole page. This works generally... I can maximize the browser and the background covers completely, BUT if there is a scroll, the image stops at the point of scroll.

This image shows the scrolling and the gap from the jsFiddle example/1 : enter image description here

#wrapper
{
    background: url("../../Images/bgMain.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
}

and the inner div

#inner
{
    margin: 0 auto;
    height: 100%;
    width: 980px;
}

Any advice would be helpful. thanks

It only exists in visible window. It will scale to the size of the window, but it won't show if you scroll. — aserwin, Apr 15 '13 at 22:16
Take a look at this : http://www.w3.org/TR/css3-background/#the-background-size — Milche Patern, Apr 16 '13 at 12:50
Go here for working examples : http://whereswalden.com/files/mozilla/background-size/more-examples.html and here https://developer.mozilla.org/en-US/docs/CSS/background-size — Milche Patern, Apr 16 '13 at 13:04

Paul Sullivan · Answer 1 · 2013-04-16T16:55:51.557

0

The problem seems to be the fixed width on .inner

.inner{
    //...
    width:980px;//this appears to be breaking the css3 background-size
}

A possible solution is to apply min-width on the .wrapper

#wrapper {
    background: url("http://placekitten.com/400/300") no-repeat 50% 0 scroll;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    min-width:980px;
}

This however means that your cute cat will be enormous on tiny screens (but as you have applied fixed width on .inner this might not matter)

see fiddle

edited Apr 16 '13 at 16:55

answered Apr 15 '13 at 21:56

Paul Sullivan

2,865
2
19
25

you may also need to remove `fixed` from the position element of background – Paul Sullivan Apr 15 '13 at 21:57
No, it is a large image that scales with the siz of the browser. But it is only ever as large as the viewable window... so if the content overflows and you scroll, the image doesn't scale. If you maximize the browser, it does. – aserwin Apr 16 '13 at 00:55
@aserwin Updated answer, changed tack (I actually looked at your jsfiddle) and have possible solution BUT I think you found some odd/intentional render behaviour of css3 attribute – Paul Sullivan Apr 16 '13 at 16:58

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

I have recently done something that might do what you're looking to do- Anything's worth a shot, right?

    background: #000 url(**snip**) no-repeat 50% 0 fixed !important;

Try adding the !important to the end of your css, it "over-rides" any other styling from other classes, ect. You never know, it might work - but it might also break something else.

What !important does can be found here.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 16 '13 at 02:42

muffinjello

158
1
5
16

Nope this is not the problem - the OP has used a css3 attribute (background-size) which appears to have a bug or some odd/intentional behaviour when it contains a fixed width child which is larger than the parents 100% width – Paul Sullivan Apr 16 '13 at 16:57

score 0 · Accepted Answer · answered May 10 '13 at 18:13

Although it wasn't the route I wanted to take... by setting the image and all of its parameters in body rather than a div, I can get the behavior I am looking for.

I don't know why that is exactly... somehow body is treated different than a div (though I do have a reset script, so I would not expect that to be the case)...

CSS background image issue

3 Answers3