40Alpha 40Alpha - 2 months ago 20
CSS Question

Background Image resize: Responsive theme

I am running into some issues with my full screen background image on my webpage. It looks great via desktop browsers (IE, Chrome, Safari...) but when the responsive theme CSS kicks in it does not resize to the correct resolution.

For desktop and responsive CSS:

background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-overflow-scrolling: touch;


I have tried using different jpeg sizes depending on the media max-width, I have also tried just applying the background image with only a
left:0px;
and I have tried
background-size:contain;
and
background-size: cover !important;
but no success. What is most frustrating is: in firefox debugger > responsive view > it's flawless but via a real phone/tablet the background is blown up and pixelated (of course you cannot expect the debugger to work).

This is also difficult because the website is technically all one page... and each "virtual page" is an individual div.

Firefox responsive:

Firefox responsive

Actual iPhone responsive (it is hard to see but on the next page there is a new image and it is huge):

Actual iPhone responsive

Answer

I figured out the key to resizing the image:

background: url(background.jpg) no-repeat local center top; 
        -webkit-background-size: 125% auto;

Play around with percent and use this ^ webkit

http://kimili.com/journal/the-flexible-scalable-background-image-redux

^ for further reading

Comments