background-size:cover not working in android native browser
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;
Background-size: cover not working in any browser
Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
(“When the image and container have different dimensions” should rather be “have different aspect ratios” – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)
If you want the image to get “squished” instead of clipped – then use background-size: 100% 100%
.
Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.
background-size: 100% 100%
means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.
cover
however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.
Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens “on the sides” of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.
That analogy make things clearer …?
CSS - background-size: cover; not working in Firefox
Well it looks alright to me in latest mozilla.
Try using this if you face problems
body {
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Lobster', cursive;
}
Edit
As some more clearance of answer to OP from comments
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
Its shorthand for,
background-image: url("./content/site_data/bg.jpg");
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
Read more here
Related Topics
Add Ripple Effect to My Button with Button Background Color
Can an Android App Connect Directly to an Online MySQL Database
Android - Application (Apk) Maximum Size
How to Globally Force Screen Orientation in Android
Email Address Validation in Android on Edittext
How to Make Constraintlayout Work with Percentage Values
No Actionbar in Preferenceactivity After Upgrade to Support Library V21
Generate APK File from Aab File (Android App Bundle)
Panic: Broken Avd System Path. Check Your Android_Sdk_Root Value
How to Shrink Code - 65K Method Limit in Dex
Android - Get Children Inside a View
How to Get the Md5 Fingerprint from Java's Keytool, Not Only Sha-1
How to Downgrade My Sdk Version
Refreshing Data in Recyclerview and Keeping Its Scroll Position