I recently came across the problem of full-screen background images in CSS. CSS3 offers a value cover which works pretty good on desktop browsers, but for the mobile version of Chrome a small hack is needed to make it work.
W3schools decribes the cover value for background-size as follows
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
Basically that sounds pretty good. I used this value for the background image on my site to display the B/W image of the beach as a full-screen background. In IE, Firefox and Chrome the results were as expected. But when I opened the website on my Chrome mobile browser I was a bit shocked. During page transitions the background looked really weird and the size was also changing….pretty weird. Here two screenshots:
I did some research on this problem and quickly found a solution. The mobile chrome browser obviously needs width and height values for the node which should have the full-screen background. So I added something like this to my html-tag:
html {
height:100%;
min-height:100%;
width: 100%;
/*background... rest of background specification*/
}
After these small changes to background-image looks like intended:
