The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
The background-size CSS property is used to set the size of a background image of an element. The background image can be stretched or constrained to fit into the existing space. It allows us to control the scaling of the background image. This property can be defined using length, percentage, or keyword values.
CSS background - Shorthand property To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
background-image
instead of background
This works in Opera : http://jsfiddle.net/ZNsbU/5/
But it doesn't work in FF5 nor IE8. (yay for outdated browsers :D )
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}
You could do it like this :
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
background-size:20px 20px
}
Which works in FF5 and Opera but not in IE8.
You can do as
body{
background:url('equote.png'),url('equote.png');
background-size:400px 100px,50px 50px;
}
Just a note for reference: I was trying to do shorthand like so:
background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;
but iPhone Safari browsers weren't showing the image properly with a fixed position element. I didn't check with a non-fixed, because I'm lazy. I had to switch the css to what's below, being careful to put background-size after the background property. If you do them in reverse, the background reverts the background-size to the original size of the image. So generally I would avoid using the shorthand to set background-size.
background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;
try out like this
body {
background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
}
/* 100px is the background size */
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