background-image
, background-sizebackground-origin
, background-clip
, background-attachment
The background of a box can have multiple layers in CSS3. The number of layers is determined by
the number of comma-separated values in the background-image
or shortcut background
properties.
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
Get rid of extra divs and wrappers used just to add background "hangers"
background-image: url(images/left.png), url(images/right.png), url(images/main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
or the shortcut method
background:url(images/left.png)left top no-repeat,
url(images/right.png) right top no-repeat,
url(images/main.png) left top repeat-x;
background-size
Specify in terms of percentage or pixels how large a background image should be.
This will allow you to re-use images in several different contexts and also expand a background
to fill an area more accurately.
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
-khtml-background-size: 50% 50%;
-o-background-size: 50% 50%;
background-size: 50% 50%;
background-size: 100% 100%
. The background image should be the image actual size 180px by 214px.background-size: 50% 50%
. The background image
should be half size, in the left upper corner of this div.The background-clip
property is used to determine whether the background image extends into the border or not. There are two options, the default border-box and padding-box. When border-box is used, the background image will extend into the border and will therefore show up behind the border. The other option is padding-box which means the background image will stop at the edge of the padding before the border. This helps display your image as desired expecially with thick borders or dotted or dashed borders.
background-origin
property specifies how the position of a background is calculated. The background-origin
property can be set to start positioning from either
the border, padding, or content (element box inside padding). This allows for greater flexibility
in terms of placing a background image.
padding-box
’
0 0
’ is the upper left corner of the
padding edge, ‘100% 100%
’ is the lower
right corner.)
border-box
’
content-box
’
The background-attachment
property determines if a background image is fixed or scrolls
with the rest of the page. It happens when we define how a background image is attached to a viewport.
Background images can be fixed
to a viewport or can scroll
along with the element or with its contents
via local
.
http://designshack.co.uk/tutorials/introduction-to-css3-part-6-backgrounds
http://whereswalden.com/files/mozilla/background-size/more-examples.html
http://people.opera.com/pepelsbey/experiments/bga/
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-origin
http://people.opera.com/danield/examples/bg-clip.html
http://www.askthecssguy.com/examples/fixedBackgroundImages/example03.html
http://people.opera.com/pepelsbey/experiments/bga/