CSS3 Backgrounds

CSS3BACKGROUND

CSS2.1 has five backgroundproperties that we can use to control the background of elements.

The five background-properties: • background-color • background-image • background-repeat • background-attachment • background-position

CSS3 gives us three newbackground-properties, as well as a range of new background property values.

All of these are designed to give us more control over background images.

However, we need to understand three important boxes, before we look at these new CSS3 properties and values.

The three boxes

First let’s start with a simple container with some contentinside. Although we cannot see it, there is an invisible box around the content called the content-box.

content-boxThe quick brownfox jumped overthe lazy webdeveloper.

If we add some padding to allsides of the container, we will have a new box called a padding-box.

padding-boxThe quick brownfox jumped overthe lazy webdeveloper.

If we add a border to all sidesof the container, we will have our third box - called a border-box.

border-boxThe quick brownfox jumped overthe lazy webdeveloper.

These three boxes are used to define where backgroundimages are placed, how they are sized and where they can be cropped.

More on these boxes later… But for now, let’s look atbackground-position and background-repeat.

background- position

By default, background imagesare placed in the top left corner of the padding-box.

Image placed in top left of padding-box

We can change this default position using the background- position property.p { background-position: 10px 10px; }

In CSS2.1, we can use two values to determine the position of the background image in relation to the element. 1 2p { background-position: 10px 10px; }

The first value represents the horizontal position. Horizontal axisp { background-position: 10% 10%; }

The second value represents the vertical axis. Vertical axisp { background-position: 10% 10%; }

In CSS3, we can specify up to four values for background- position. 1 2 3 4p { background-position: left 10px top 15px; }

The first two values represent the horizontal axis. Horizontal axisp { background-position: left 10px top 15px; }

The second two values represent the vertical axis. Vertical axisp { background-position: left 10px top 15px; }

This is a powerful addition, as it means we can positionimages using length values in relation to any of the fourcorners of elements, not just the top left corner.

Positive andnegative values

We can use both positive and negative values to determine the position of background images. Negative valuesp { background-position: -5px -9px; }

Positive values will movethe background image to the right and down - inside the background area of the element.

Positive x value

Positive y value

Negative values will move thebackground image to the left and up - out of the background area of the element.

Negative x value

Negative y value

background- repeat

By default, images will repeatalong both the x and y axis - starting from the top leftcorner of the padding-box.

Even though the background images start in the top left corner of the padding-box,they will repeat outwards in alldirections, including into the border-box area.

In CSS2.1, we could change the repeat behaviour using four different keywords. • repeat • repeat-x • repeat-y • no-repeat

repeat

Repeat-x

Repeat-y

no-repeat

repeat repeat?

In CSS3, we can now define background-repeat using two values instead of one.div { background-repeat: repeat repeat; }

The first of these two values represents the horizontal axis. Horizontal axisdiv { background-repeat: repeat repeat; }

The second value represents the vertical axis. Vertical axisdiv { background-repeat: repeat repeat; }

If we use one value only, the browsers will interpret this as a double value. This allows the background-repeat value to be backwards compatible. Browser doubles valuediv { background-repeat: repeat [repeat]; }

Using ‘space’ and ‘round’

CSS3 also allows us to use two new values with thebackground-repeat property: • space • round

Browser space roundFirefox 3.6, 4 No NoSafari 4, 5 No NoChrome 10 No NoIE 6, 7, 8 No NoIE 9 No NoOpera 10, 11 Yes Yes

The space value sets the image to repeat as often as will fit within the background area and then the images are spaced out to fill the area. The first and last images touch the edges of the area.p { background-repeat: space; }

Images set to space along the vertical axis

The round value sets the image to repeat as often as will fit within the background area. If it doesnt fit a whole number of times, it is rescaled so that it does.p { background-repeat: round; }

Images set to round along the vertical axis

Be aware that the backgroundimages may be stretched or distorted using this method.

These new values gives us much more flexibility whenlaying out background-images.

For example, we can now use two values to define different horizontal and vertical behaviour:div { background-repeat: space no-repeat; }

Three newproperties

In CSS3, we can also use three entirely new background properties. • background-origin • background-clip • background-size

background- origin

The background-origin property is used to determine where background images are positioned inside a box.div { background-origin: padding-box; }

We can position our background images viabackground-origin using three possible values: • content-box • padding-box • border-box

Positioned in relation to the content-box

Positioned in relation to the padding-box

Positioned in relation to the border-box

Browser background-originFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

background- clip

The background-clip property is used to determine where and if background images are clipped (or cut off) inside the background area.div { background-clip: padding-box; }

Browser background-clipFirefox 3.6 (See notes next slide)Firefox 4 YesSafari 4, 5 -webkit-background-clipChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

Firefox versions 1.0 to 3.6 support an older syntax: • border (instead of border-box) • padding (instead of padding-box)Note: they do not support content or the newer content-box values.Thanks to Louis Lazaris - impressivewebs.com for picking up this FireFox support issue

We can clip our backgroundimages via the background- clip property using three possible values: • content-box • padding-box • border-box

Background-image clipped inside content-box

Background-image clipped inside padding-box

Background-image clipped inside border-box

background- size

In CSS.1, we could applybackground images to elements, but we had no way to control the size of these background images.

However, CSS3 allows us to set the size of our background images using the background- size property.div { background-size: 10px 20px; }

We can set the size using lengthvalues, percentage values or one of two new keywords: • contain • cover

Browser background-sizeFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

Length values

The length value sets the height and width of the background image. The first value sets the width, the second value sets the height. Width Heightdiv { background-size: 10px 20px; }

If only one length value is given, the second value is set to the ‘initial value’ of auto. Initial value of auto useddiv { background-size: 10px [auto]; }

Percentage values

The percentage value sets the height and width to a percent of the parent element. The first value sets the width, the second value sets the height. Width Heightdiv { background-size: 20% 40%; }

Like length values, if only one percentage value is given, the second is set to the ‘initial value’ of auto. Initial valuediv { background-size: 10% [auto]; }

The ‘contain’ value

The contain value will scale the image (while keeping it’s aspect ratio) to the largest size such that both its width and its height can fit inside the background area.div { background-size: contain; }

Large background image scaled down to fit using contain

The contain value is mainlyused when the background image is larger than the container.Be aware that images may distort using this value.

The ‘cover’ value

The cover value will scale the image (while keeping it’s aspect ratio) to the smallest size such that both its width and its height can completely cover the background area.div { background-size: cover; }

Small background image scaled up to fit using cover

The cover value is mainly used when background images aresmaller than the container. Be aware that images may distort using this value.

Shorthandproperties

Some CSS properties can be combined into shorthandproperties. This saves us having to write multiple declarations.

The background property allows us to set all of the individual background properties using one rule.

CSS2.1 background syntax:p { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];}

The CSS3 background syntaxp { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-origin] Three new [background-clip] CSS3 properties [background-size];}

Understanding initial values

If you are going to useshorthand properties, you need to understand initial values,as these values can affect which rules will be applied and those that may not!

If we use a shorthand background property, we don’t need to define all the background properties in order for the rule to work. For example: Only one background-property definedp { background: yellow; }

However, browsers will add initial values for any value that we don’t define. Initial values added by browserp { background: [none] [0% 0%] / [auto auto][repeat repeat] [scroll] [padding-box][border-box] yellow; }

The initial values are:background-color transparentbackground-image nonebackground-repeat repeatbackground-attachment scrollbackground-position 0% 0%background-origin padding-boxbackground-clip border-boxbackground-size auto

Why does all this matter? You may try to specify two background rules for the same element and then wonder why one of the rules doesn’t work.Same elementp { background: url(a.gif); }P { background: yellow; }

p { background: url(a.gif) [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];} The first rule has a background-image specified. All other initial values are added by the browserp { background: [none] [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;}

p { background: url(a.gif) [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];} As the second rule has no background-image defined, the browser has set the value to an initial value of nonep { background: [none] [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;}

p { background: url(a.gif) [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];} The second rule wins, as it is written last. So, no background image is appliedp { background: [none] [0% 0%] / [auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;}

Now, it’s time to talk aboutthe most exciting part of CSS3 backgrounds.

Multiplebackgrounds

With CSS2.1, we could only addone background image to any HTML element.

However, CSS3 allows us to add multiple background images to any element!

Browser Multiple backgroundsFirefox 3.6, 4 YesSafari 4, 5 YesChrome 10 YesIE 6, 7, 8 NoIE 9 YesOpera 10, 11 Yes

Longhand

CSS3 allows us to place multiple, comma-separated values into any background property.p { Comma after each value background-image: url(01.gif), url(02.gif), url(03.gif);}

An example of three background images inside one element - written in longhand background-image 1p{background-image: url(01.gif), url(02.gif), url(03.gif) ;background-position: left top, 50% 30%, 10px 100px ;background-size: auto, 10% auto, auto ;background-repeat: no-repeat, repeat, repeat-y ;Background-attachment: scroll, scroll, scroll ;background-origin: padding-box, padding-box, border-box ;background-clip: border-box, padding-box, border-box ;}

Each of the images is sized,positioned, and tiled accordingto the corresponding value in the other background properties.

If a property doesnt have enough comma-separated values to match the number of layers, the browser must calculate its used value by repeating the list of values until there are enough.

The background images are thendisplayed in layers - one on top of each other. The first image in the list is the layer closest tothe user, the next one is painted behind the first, and so on.

Layer 3

Layer 2

Layer 1

Only one background-colorcan be defined for any element!

The background-color is assigned to the lowest layer - called the ‘final layer’. Thisbackground-color sits below the background image on this final layer.

Shorthand

All of these backgroundproperties can be combined into a single shorthand background property.

Multiple shorthand backgrounds are written in the same way assingle shorthand backgrounds -with comma’s separating each background value.

A simple example of three background images inside one element - written in shorthand.p background-image 1{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}

A simple example of three background images inside one element - written in shorthand.p background-image 2{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}

A simple example of three background images inside one element - written in shorthand.p{ background: background-image 3 url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px;}

Just as with the longhand version, each of the backgroundimages is displayed as a layer - one on top of each other.

Background-color and multiple backgrounds

Only the lowest layer, calledthe ‘final layer’, can be given a background-color.

The background-colorsits below the background image on this final layer only.

If a background-color value is assigned to any other layer apart from the final layer, the entire rule will not be displayed.

A background-color assigned to the final layer only.p Final layer with background-color assigned{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px yellow;}

It may be safer to add the background-color as aseparate declaration using the background-color property.

A background-color declared separately.p background-color{ background: url(01.gif) no-repeat, url(02.gif) repeat left bottom, url(03.gif) repeat-y 10px 5px; background-color: yellow;}

Some catches withcomplex shorthands

If you are writing more complex shorthand rules, you have to be aware of some browser quirks and catches.

Theoretically, the correct syntax for all background properties is:p{background: [background-image] background-image [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] Background-position [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] [/ background-size] Background-size [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] [/ background-size] [background-repeat] Background-repeat [background-attachment] [background-origin] [background-clip] [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] Background-attachment [background-origin] [background-clip] [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] Background-origin [background-clip] [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] Background-clip [background-color];

Theoretically, the correct syntax for all background properties is:p{background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color]; Background-color

You may have noticed that there is a forward slash between background-position and background-size.

A forward slash separating position and size.p{background: [background-image] [background-position] Slash [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

Safari 5, firefox 4, and Chrome 10all have two problems with rules written out in full like this.

These browsers do not understand the forward-slash within the shorthand rule. Theyignore the entire declaration when a forward slash is included.

These browsers do notunderstand the use of two boxvalues (origin and clip) within theone shorthand rule. They ignore the entire declaration when a these two values are included.

So, at this time, shorthand is great for less complex declarations, but if you want to include all seven properties, itmay be better to use longhand for the present.

Multiplebackgrounds and gradients

Keep in mind that gradients are a type of generated image. They can be used in place of the url() value.

This means you can include gradients within multiple backgrounds. Linear gradientp{background:url(demo.jpg) no-repeat 0 0,linear-gradient(left, blue, green);}

Vendor-specificextensions and multiple backgrounds.

What happens when you want toadd vendor-specific properties into multiple backgrounds?

Browsers will ignore CSS theydon’t understand. In fact, they will ignore the entire declaration.

Vendor-specific properties are only understood by individualbrowsers - that’s their purpose.

The downside of this is that we cannot add multiple vendor- specific properties into onedeclaration as all browsers would then ignore the entire declaration.

This means we have to rewritethe background property for each vendor-specific property. Anyother background images have to be included in each declaration.

For example:p{background: url(demo.jpg) no-repeat 0 0, -moz-linear-gradient(left, blue, green);background: url(demo.jpg) no-repeat 0 0, -o-linear-gradient(left, blue, green);background: url(demo.jpg) no-repeat 0 0, -webkit-gradient(linear, left top, right top, from(blue), to(green));}

Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley

http://www.zhangxinxu.com	981
http://www.maxdesign.com.au	469
http://www.scoop.it	100
http://normalstory.tistory.com	37
http://paper.li	16
http://www.ustudy.in	9
https://twitter.com	4
http://ustudy.in	2
http://twitter.com	2
http://xianguo.com	1
http://www.w3schools.com	1
http://www.codecss.net	1
http://duckduckgo.com	1
http://webcache.googleusercontent.com	1
http://translate.googleusercontent.com	1
http://t1t2.rtrn.net	1
http://ctc.qzs.qq.com	1

CSS3 Backgrounds

by Russ Weakley on Apr 29, 2011

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 1,628

Statistics

CSS3 Backgrounds Presentation Transcript