Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Method to check for css background-size support

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.

like image 646
George Avatar asked May 12 '13 17:05

George


People also ask

How does background-size work CSS?

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.

How do I resize my background image to fit CSS?

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.

Can we specify the background-size in percentage in CSS?

You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.

What is background-size syntax?

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 ...


Video Answer


1 Answers

if( 'backgroundSize' in document.documentElement.style) would be the easiest way to go about it.

like image 157
Niet the Dark Absol Avatar answered Oct 23 '22 14:10

Niet the Dark Absol