• Share
  • Email
  • Embed
  • Like
  • Private Content
CSS3 Backgrounds
 

CSS3 Backgrounds

on

  • 14,338 views

A detailed look at CSS3 backgrounds including the three key boxes - content-box, padding-box,border-box. The presentation also explores new values - such as space, round, contain and cover. Also ...

A detailed look at CSS3 backgrounds including the three key boxes - content-box, padding-box,border-box. The presentation also explores new values - such as space, round, contain and cover. Also covered are three new properties - background-origin, background-clip and background-size. Finally, the presentation explores shorthand CSS3 backgrounds and multiple background images. Not for the faint-hearted!

Statistics

Views

Total Views
14,338
Views on SlideShare
11,872
Embed Views
2,466

Actions

Likes
28
Downloads
242
Comments
4

21 Embeds 2,466

http://www.zhangxinxu.com 1163
http://www.maxdesign.com.au 760
http://wrmf.ca 255
http://www.scoop.it 101
http://www.ustudy.in 71
http://normalstory.tistory.com 66
http://paper.li 16
http://ustudy.in 9
http://localhost 7
https://twitter.com 5
http://translate.googleusercontent.com 2
http://twitter.com 2
http://staging2.inceptum.eu 1
http://t1t2.rtrn.net 1
http://webcache.googleusercontent.com 1
http://duckduckgo.com 1
http://www.codecss.net 1
http://www.w3schools.com 1
http://ctc.qzs.qq.com 1
http://xianguo.com 1
https://duckduckgo.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS3 Backgrounds CSS3 Backgrounds Presentation Transcript

    • 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 ;}
    • An example of three background images inside one element - written in longhand background-image 2p{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 ;}
    • An example of three background images inside one element - written in longhand background-image 3p{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