CSS3 Tutorials
Background properties allow a CSS author to control the appearance of an element’s background. CSS has contained background properties since version 1 but many of these properties are new with CSS3. This module will demonstrate the use of the background-size and background-origin properties.
Overview
CSS2 supports the following background properties:
- attachment
- color
- image
- position
- repeat
The following background properties are new with CSS3:
- clip
- origin
- quantity
- size
- spacing
An element’s background includes the background of the element’s border, content and padding. Authors can specify an element’s background as a color or an image. An element does not inherit properties from its parent, although the parent element’s background will shine through by default. This is because an element’s background color defaults to “transparent”. An element’s margin is always transparent, so the parent element’s background always shines through. The World Wide Web Consortium recommends that authors should specify the background of the <body> element if the <html> background property is transparent.
Compatibility
Modern browsers generally support the CSS3 background properties, including the properties that are new with CSS3. The following browsers and their later versions support all CSS3 background properties:
- Chrome
- Firefox 4
- Internet Explorer 9
- Opera
- Safari 5
Safari 4 requires the –webkit- prefix to be added to the background property to support properties that are new with CSS3.
Size Property
The background-size property specifies the background image’s size. The actual size of the image determined the background image’s size prior to CSS3. The background-size property allows the author to specify image size in terms of pixels or as a percentage of the parent element’s width and height. The following code demonstrates the use of the background-size property:
<!DOCTYPE html> <html> <head> <style> body { background:url(img_flwr.gif); background-size:60px 80px; background-repeat:no-repeat; } </style> </head> <body> <p> Resized image: </p> <p> Original image: <img src=”img_flwr.gif” > </p> </body> </html>
The CSS3 element in the above code has a non-repeating background image of a flower. The image has been resized to a width of 60 pixels and a height of 80 pixels. The first paragraph with the text “Resized image:” uses the background previously specified by the CSS3 element. The second paragraph with the text “Original image:” uses traditional HTML code to specify the same background image at its original size.
Origin Property
The background-origin property describes the background images’ positioning area within an element. Authors can place the background image within the element’s border, content or padding area. The following code illustrates these three uses of the background-origin property:
<!DOCTYPE html> <html> <head> <style> div { border:10px solid black; padding:40px; background-image:url(‘smiley.gif’); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } #div3 { background-origin:padding-box; } </style> </head> <body> <p>background-origin:border-box:</p> <div id=”div1″> Hello world! </div> <p>background-origin:content-box:</p> <div id=”div2″> Hello world! </div> <p>background-origin:padding-box:</p> <div id=”div3″> Hello world! </div> </body> </html>
The div element in the above code describes a box with a black border that is 10 pixels wide and a padding area that is 40 pixels wide. The background image is a non-repeating smiley face that will be placed in the leftmost position of the specified area.
The div1 instance of the div element places the smiley face in the border area. The div2 instance places the smiley face in the content area and the div3 instance places the smiley face in the padding area.
Emmet M is a freelance writer available on WriterAccess, a marketplace where clients and expert writers connect for assignments.
