Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

background-size in shorthand background property (CSS3)

Tags:

css

People also ask

What is shorthand background property in CSS?

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

What is the use of background-size contain property in css3?

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.

Is a shorthand property for all the background -* properties?

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.


  1. Your jsfiddle uses background-image instead of background
  2. It seems to be a case of "not supported by this browser yet".

This works in Opera : http://jsfiddle.net/ZNsbU/5/
But it doesn't work in FF5 nor IE8. (yay for outdated browsers :D )

Code :

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 */