Image Background on Mobile Devices


I am using this code to display a full size background image:

.pagebk {-webkit-background-size: cover !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;}

.pagebk {background: #fff url( no-repeat center center fixed !important;}

Image resolution is 1920 x 1080px. On my android mobile phone it just takes up a small box on the upper left side of the screen.

Why does this happen?
How can i fix this?

many thanks


First things first and the order of your code is wrong and the background-size:cover will never get actioned because you over-ride it with the shorthand ‘background’ which will set background-size to default. The order of the code should be this:

.pagebk {background: #fff url( no-repeat center center fixed !important;}
.pagebk {-webkit-background-size: cover !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;}

If .pagebk is applied to the body or html elements then you may need to set html and body to height:100%.


I assume you have the viewport meta tag in place also (also assuming you are supplying mobile styles via media queries etc).

Some older mobiles have problems with fixed positioning so if its an older phone you may have to forego the fixed position at smaller screen widths.

thanks Paul… I changed the order - thanks for that…

Still doesn’t work for me - I decided against using the meta tag viewport because it was making things worse actually - I am using Wordpress and you can see a live example of the problem here:

I would appreciate it if you could have a look and point me to the right direction :slight_smile:

Sometimes you have to makes things worse before making them better. :slight_smile: If you don’t want the meta tag, you might as well remove the @media rules as well.

Ralph, i don’t think i am using any media rules as i have no experience with them… i think my wordpress theme is taking care of displaying the site correctly on different devices i.e. its responsive


Try adding this rule:

.pagebk {
-webkit-background-size: 100% !important; 
    -moz-background-size: 100% !important; 
    -o-background-size: 100% !important; 
    background-size: 100% !important; 
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    background-size: cover !important;

More info here.

Hi Paul, you might want to check the web link i provided again as it doesn’t seem to work :frowning:

I don’t have all devices ever made at hand to test so its a bit like working in the dark :slight_smile:

What device are you using exactly and what browser?

Do you have a screenshot?

You are not actually doing anything helpful for mobiles at all anyway so I guess they are just scaling the page smaller to fit and thus losing the image size on the way. You don’t have any responsive techniques built into that page that I can see.

However I have checked in the iphone and the opera android emulators and the image is showing OK there albeit that the page is microscopically small because they just guess that it is 980px and then scale it until it fits.

BTW where did you put the code I gave you. I can’t find it in your css?

Using HTC One… latest operating system…

Here is how the pages look.

I have the added the code in styles.css but i am using different names for the page-ids.

Let’s try it another way.:slight_smile:

Do either of these render correctly for you?

They are just simple pages with minimal code and may help to pinpoint a problem.

ok neither of these pages work… exactly the same problem…

Ok more tests :slight_smile:

Let me know how each of those perform and it should narrow the problem down a little more. (screenshots would be nice :))

ok i will send this late tonight… :slight_smile:

Another version to test :

This is a confirmed bug in Android so work-a-rounds are all we have.





seems that HTC3 is the best working solution !


It’s worse than I thought then and you have no choice of you want to support android but to remove the fixed attachment for mobiles.

You can use a device-width media query and remove the fixed background for smaller devices.

Test this example:

It should be a fixed background in desktops but on devices of 762px and smaller the background won’t be fixed but should stretch to cover the content (assuming android handles everything else ok).

thanks for this but HTC6 gives exactly the same problem…

what happens if we use HTC3 as it is? would that not work on all devices ?


Yes the htc3 example just removes the “fixed” attachment from the body which means all browsers get a non fixed background. It means that all browsers get a reduced experience rather than just android users which is a shame.

The example htc6 should have been exactly the same for android as htc3 but it seems it won’t action the media query unless you add the viewport meta tag so its a catch 22 situation again. If you add the viewport meta tag then the page won’t get scaled smaller but the media query will work but as you haven’t supplied and styles for smaller devices it will fail miserably.

Here’s another attempt to catch android using a device-pixel-ratio media query but I feel this may fail also because of the absence of the viewport meta tag.

All it does is use a special media query in the hope of catching android and removes the ‘fixed’ from the background property. Desktops will not be affected but all mobiles that understand that rule will get the non fixed styles. This of course means that devices like the iphone which are working fine with the fixed background will no longer get the fixed background either.

If the above doesn’t work then you are just left with removing 'fixed" from your background rule (as in the htc3 example) and let all browsers have the non fixed layout. (Or add the viewport meta tag and then add suitable media query styles for mobile. That is a long job and not something you can do in a day or two.)

Android seems to be very buggy but I would guess eventually these bugs will be fixed.

ok htc7 shows no picture at all ! why does this have to be so complicated? :slight_smile: