Wednesday, January 30, 2013

background-size not working in IE


In case there is a 'background-image', the 'background-size' can be used to stretch or shrink it.

If the property has only one value, it applies both horizontally and vertically. If there are two, the first one refers to the width, the second to the height of the background image.

Code Problem
p {
    background-image: url(backgroundSize.png);
    background-size: 100% 500px;
    background-origin: border;
}

"background-size: 100% 500px;" stretches the image horizontally 100% and vertically 500px, but this property is not supported by Internet Explorer < 9.0

Solution
This is a CSS3 property, which is not supported by < IE9.0 browsers. There is an IE filter, for IE 5.5+, which you can apply to make it work in IE's all versions:
p {
    background-image: url(backgroundSize.png);
    background-size: 100% 500px;
    background-origin: border;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='backgroundSize.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='backgroundSize.png', sizingMethod='scale')";

}


Other BackgroundProperties
Value Description
background-color This property sets the background color of an element.
background-image SThis property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable.
background-repeat If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box. ie. repeat-x, repeat-y, no-repeat
background-attachment If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll'). Value: scroll | fixed | inherit
background-position If a background image has been specified, this property specifies its initial position.
background-clip Determines whether the background extents into the border area or not. If the value is 'padding', the background is clipped to the padding edge and the background of the border is transparent.
background-size In case there is a 'background-image', the background-size can be used to stretch or shrink it.
background-origin Determines how the 'background-position' is calculated.
background-quantity If a 'background-image' is specified, the value of 'background-quantity' determines how many times the image will repeat.
background- spacing This property specifies the distance that separates the 'background-image' of the position given by the property "background-position", as well as the spacing among all of the repetitions of the background image. If a measure is specified, this gives the horizontal and vertical space relative to the coordinates specified by the "background-position" property.
more information - *w3schools