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(http://placehold.it/1920x1080) 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%.
html,body{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
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
I don’t have all devices ever made at hand to test so its a bit like working in the dark
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?
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).
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.
