Menu
I'm trying to fit a background image to it's container using background-size:cover.
here is my fiddle : The Fiddle
it works in all browsers but not working in Android native browser.. anybody has any solution please ? thanks
262
Try setting your header to height: 100% . Alternatively (the better solution), set the background on the body if you want it to cover the whole page.
If the background-size is contain or cover : While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
Browsers have a limit to the file size they'll display as a background image. Make sure you're not trying to put a billboard sized image where a notebook sized image belongs.
If the background-size is contain or cover: While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area. If the background-size is auto or auto auto:
If both components of background-size are specified and are not auto: The background image is rendered at the specified size. If the background-size is contain or cover: While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area.
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space. The source for this interactive example is stored in a GitHub repository.
After searching about this problem and finding no solution, I deleted background-image from CSS file styles and used an inline style in HTML codes. The problem with android native browser is solved.
I updated the fiddle and it's working in android native browser.
The Updated Fiddle
it seems that android also has problem with parsing background format like this :
background: url('...') fixed center center / cover;
and we should separate the background-image form others and use it inline, and then use each option separately in css file, like this :
background-size: cover;
background-position: center center;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With