I know what the difference is between background-size: cover and background-size: 100% auto. I'm curious if there is a performance difference between the two and which one would be preferred?
Add a comment
|
2 Answers
It's always good to go for % because it guarantees fluid content. It's good both for Google and your users to have a good mobile version of your site.
I don't think there would be a difference in the performance or at least not a difference that you can spot. You can test it by putting both of the properties and testing your page speed with a tool for both of them but I am certain that there wouldn't be any difference.
In my opinion, % would be better than cover since it's easier for the browsers to render it and make it fluid for the different resolutions.
There is a performance difference between the two, using background-size: 100%; is not supported for Android 4.3 Browser and below. Also, background-size percentage values are not properly supported for SVG images on Safari.
Also, iOS Safari has long had very buggy behaviour with background-size: cover. All this info is from the excellent Can I Use... website - look under the 'Known issues' tab below the graph.
As a workaround for most of the above you can use the jQuery Backstretch plugin. It's slower than CSS but the end result might be more satisfactory for you.
If you stick with an abstract pattern, image, or especially a gradient you can probably ignore the random bugs since it is much less likely visitors will notice if the background scales properly.
