I'm working on a site that primarily uses the background-size:cover
property for the background. However I'd like to support IE 7/8, I'm aware I could use IE conditional comments but checking for the property support would be more useful since it could support other old browsers as oppose to just IE.
I have the solution to the background issue, but I need to know when to add it with js depending on if there's support for the background-size
property.
My question is, whats the best method to check for css background-size
property in old browsers?
I have seen a few related questions but they all require using Modernizer, I'd prefer not using an extra library unless its the only option.
Thanks.
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 background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.
There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated ...
if( 'backgroundSize' in document.documentElement.style)
would be the easiest way to go about it.
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