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
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
No comments:
Post a Comment
your comments.....