### Background shorthand examples Source: https://www.w3.org/TR/css-backgrounds-3 Example showing a simple background-color declaration and a more complex background shorthand with multiple properties. ```css body { background: red } p { background: url("chess.png") 40% / 10em gray round fixed border-box; } ``` -------------------------------- ### Equivalent longhand for multiple background layers Source: https://www.w3.org/TR/css-backgrounds-3 Equivalent longhand properties for the multiple-layer shorthand example. ```css background-image: url(a.png), url(b.png), url(c.png); background-position: top left, center, top left; background-repeat: no-repeat, no-repeat, repeat; background-clip: border-box, border-box, border-box; background-origin: padding-box, padding-box, padding-box; background-size: auto auto, 100% 100%, auto auto; background-attachment: scroll, scroll, scroll; background-color: white; ``` -------------------------------- ### background-image examples Source: https://www.w3.org/TR/css-backgrounds-3 Shows four ways to set background-image: a URL, none, multiple comma-separated images, and a radial-gradient. The none value and empty or undisplayable images count as layers but draw nothing. ```css html { background-image: url("marble.svg") } p { background-image: none } div { background-image: url(tl.png), url(tr.png) } main { background-image: radial-gradient(at bottom right, transparent, white); } ``` -------------------------------- ### Equivalent longhand for body background Source: https://www.w3.org/TR/css-backgrounds-3 Equivalent longhand properties for the body rule in the previous example. ```css body { background-color: red; background-position: 0% 0%; background-size: auto; background-repeat: repeat; background-clip: border-box; background-origin: padding-box; background-attachment: scroll; background-image: none } ``` -------------------------------- ### Equivalent longhand for p background Source: https://www.w3.org/TR/css-backgrounds-3 Equivalent longhand properties for the p rule in the previous example. ```css p { background-color: gray; background-position: 40% 50%; background-size: 10em auto; background-repeat: round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) } ``` -------------------------------- ### Fixed background band example Source: https://www.w3.org/TR/css-backgrounds-3 Creates an infinite vertical band that remains glued to the viewport when the document is scrolled. Uses background-attachment: fixed. ```css body { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; } ``` -------------------------------- ### CSS border shorthand equivalence example Source: https://www.w3.org/TR/css-backgrounds-3 Shows that the border shorthand is equivalent to setting the four individual border properties plus border-image to none. The first rule uses the border shorthand, and the following five rules set the same values explicitly. ```css p { border: solid red } p { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red; border-image: none; } ``` -------------------------------- ### background-repeat: repeat-y example Source: https://www.w3.org/TR/css-backgrounds-3 Tiles a background image vertically (repeat-y) while centering it horizontally. The image repeats only along the vertical axis, leaving the horizontal axis unrepeated. ```css body { background: white url("pendant.png"); background-repeat: repeat-y; background-position: center; } ``` -------------------------------- ### background-repeat: space example Source: https://www.w3.org/TR/css-backgrounds-3 Uses background-repeat: space to repeat the image as many times as fit without clipping, then spaces the copies evenly. The first and last images touch the edges of the background positioning area. ```css body { background-image: url(dot.png) white; background-repeat: space } ``` -------------------------------- ### CSS border property order example Source: https://www.w3.org/TR/css-backgrounds-3 Illustrates the importance of rule order when using border properties with overlapping functionality. The border-left shorthand resets the left border's color to its initial value, overriding the earlier border-color: red for that side. ```css blockquote { border-color: red; border-left: double; color: black } ``` -------------------------------- ### Background shorthand equivalence with visual-box Source: https://www.w3.org/TR/css-backgrounds-3 Shorthand and its equivalent longhand form, showing how background-origin and background-clip are set by a single visual-box value. ```css div { background: padding-box url(paper.jpg) white center } div { background-color: white; background-image: url(paper.jpg); background-repeat: repeat; background-attachment: scroll; background-position: center; background-clip: padding-box; background-origin: padding-box; background-size: auto auto } ``` -------------------------------- ### Background color and image shorthand Source: https://www.w3.org/TR/css-backgrounds-3 Shorthand setting a background color and an image rescaled to full width. ```css E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat} ``` -------------------------------- ### Multiple background layers shorthand Source: https://www.w3.org/TR/css-backgrounds-3 Shorthand with multiple comma-separated background layers. ```css background: url(a.png) top left no-repeat, url(b.png) center / 100% 100% no-repeat, url(c.png) white; ``` -------------------------------- ### Show background image at natural size Source: https://www.w3.org/TR/css-backgrounds-3 Shows the background image at its natural size using the default values for background-repeat and background-size. ```css div { background-image: url(image1.png); background-repeat: repeat; /* default */ background-size: auto } /* default */ ``` -------------------------------- ### Layering multiple background images with list matching Source: https://www.w3.org/TR/css-backgrounds-3 Two equivalent sets of background declarations. The first has extra values for background-position and missing values for background-origin and background-repeat; the second shows the result after the UA drops the extra position and repeats the missing lists (emphasized with asterisks). ```css background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left, bottom right; background-origin: border-box, content-box; background-repeat: no-repeat; ``` ```css background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box**, border-box**; background-repeat: no-repeat**, no-repeat, no-repeat**; ``` -------------------------------- ### Fallback for fixed backgrounds Source: https://www.w3.org/TR/css-backgrounds-3 Shows fallback declarations for user agents that do not support fixed backgrounds. The first declaration is for all UAs, the second for those that support fixed backgrounds. ```css body { /* For all UAs: */ background: white url(paper.png) scroll; /* For UAs that do fixed backgrounds: */ background: white url(ledger.png) fixed; } h1 { /* For all UAs: */ background: silver; /* For UAs that do fixed backgrounds: */ background: url(stripe.png) fixed, white url(ledger.png) fixed; } ``` -------------------------------- ### background shorthand with position keywords Source: https://www.w3.org/TR/css-backgrounds-3 Uses the background shorthand with keyword values to set background-position to the stated percentage values. The comments show the resulting horizontal and vertical percentages. ```css body { background: url("banner.jpeg") right top } /* 100% 0% */ body { background: url("banner.jpeg") top center } /* 50% 0% */ body { background: url("banner.jpeg") center } /* 50% 50% */ body { background: url("banner.jpeg") bottom } /* 50% 100% */ ``` -------------------------------- ### background-position offset declarations Source: https://www.w3.org/TR/css-backgrounds-3 Shows how to specify background-position with one or two values, where a single value defaults the other to center, and with three or four values where each offset must be preceded by a keyword indicating the edge. The comments show the resulting (horizontal, vertical) offsets from the top left corner. ```css background-position: left 10px top 15px; /* 10px, 15px */ background-position: left top ; /* 0px, 0px */ background-position: 10px 15px; /* 10px, 15px */ background-position: left 15px; /* 0px, 15px */ background-position: 10px top ; /* 10px, 0px */ background-position: left top 15px; /* 0px, 15px */ background-position: left 10px top ; /* 10px, 0px */ ``` -------------------------------- ### CSS border-image with url() and round stretch Source: https://www.w3.org/TR/css-backgrounds-3 Creates a border image from a 81x81 pixel image divided into 9 equal parts. The border-image shorthand slices the image at 27 pixels, rounds the top and bottom edges, and stretches the left and right edges. ```css DIV { border: double orange 1em; border-image: url("border.png") 27 round stretch; } ``` -------------------------------- ### background-image grammar: = | none Source: https://www.w3.org/TR/css-backgrounds-3 Grammar definition for the background-image property value, which is either an or the keyword none. The property accepts a comma-separated list of these values. ```css = | none ``` -------------------------------- ### Force background image to 15px by 15px Source: https://www.w3.org/TR/css-backgrounds-3 Forces the background image to be 15 by 15 pixels using background-size: 15px 15px. ```css p { background-size: 15px 15px; background-image: url(tile.png)} ``` -------------------------------- ### Background shorthand grammar Source: https://www.w3.org/TR/css-backgrounds-3 Grammar for the background shorthand value, defining the syntax for background layers and the final layer that may include a color. ```css = || [ / ]? || || || || = || [ / ]? || || || || || <'background-color'> ``` -------------------------------- ### background-position value grammar Source: https://www.w3.org/TR/css-backgrounds-3 Defines the grammar for the background-position property values. It allows one or two keywords or length-percentage values. ```css = [ [ left | center | right | top | bottom | ] | [ left | center | right | ] [ top | center | bottom | ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ] ] ``` -------------------------------- ### background-repeat grammar Source: https://www.w3.org/TR/css-backgrounds-3 Grammar for the background-repeat property value. Single keywords compute to pairs: repeat-x to repeat no-repeat, repeat-y to no-repeat repeat, repeat to repeat repeat, space to space space, round to round round, and no-repeat to no-repeat no-repeat. ```css = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} ``` -------------------------------- ### Fit two copies horizontally with background-size: 50% auto Source: https://www.w3.org/TR/css-backgrounds-3 Stretches the image so that exactly two copies fit horizontally while preserving the aspect ratio. Uses background-size: 50% auto and background-origin: border-box. ```css p { background-image: url(tubes.png); background-size: 50% auto; background-origin: border-box } ``` -------------------------------- ### Use natural image size with background-size: auto Source: https://www.w3.org/TR/css-backgrounds-3 Uses the image's natural size with background-size: auto, which is the only possible behavior in CSS level 1 and 2. ```css body { background-size: auto; /* default */ background-image: url(flower.png) } ``` -------------------------------- ### background-attachment value grammar Source: https://www.w3.org/TR/css-backgrounds-3 Defines the grammar for the background-attachment property values. The keywords are scroll, fixed, and local. ```css = scroll | fixed | local ``` -------------------------------- ### Round background height with background-repeat: repeat round Source: https://www.w3.org/TR/css-backgrounds-3 Shows the background with a width of 3em and a height that is either the height corresponding to that width at the original aspect ratio or slightly less. ```css div { background-image: url(image4.png); background-repeat: repeat round; background-size: 3em auto } ``` -------------------------------- ### Round background height with background-size: auto 4em Source: https://www.w3.org/TR/css-backgrounds-3 Shows the background with a height of approximately 4em, scaled to fit a whole number of times in the background height. The width is scaled to fit a whole number of times in the background width. ```css div { background-image: url(image5.png); background-repeat: round; background-size: auto 4em } ``` -------------------------------- ### background-position relative to bottom and right edges Source: https://www.w3.org/TR/css-backgrounds-3 Positions the background image 10px from the bottom and 3em from the right edge using the four-value syntax with edge keywords. ```css background-position: right 3em bottom 10px ``` -------------------------------- ### Set background width to 3em with proportional height Source: https://www.w3.org/TR/css-backgrounds-3 Shows the background with a width of 3em and height scaled proportionally to preserve the aspect ratio. The comment notes that background-size: 3em is equivalent to '3em auto'. ```css div { background-image: url(image2.png); background-repeat: repeat; /* default */ background-size: 3em } /* = '3em auto' */ ``` -------------------------------- ### Round background width with background-repeat: round repeat Source: https://www.w3.org/TR/css-backgrounds-3 Shows the background with a width of approximately 3em, scaled to fit a whole number of times in the width. The height is scaled proportionally to keep the aspect ratio. ```css div { background-image: url(image3.png); background-repeat: round repeat; background-size: 3em auto } ``` -------------------------------- ### Position image at lower-right corner Source: https://www.w3.org/TR/css-backgrounds-3 Places a single background image in the lower-right corner of the viewport using background-position: 100% 100% with a fixed attachment and no repeat. ```css body { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } ``` -------------------------------- ### CSS border shorthand resets border-image Source: https://www.w3.org/TR/css-backgrounds-3 Shows how the border shorthand resets border-image. The first rule sets border-image after the shorthand, while the second rule uses border: none to turn off all borders and reset border-image. ```css .notebox { border: double orange; /* must set 'border' shorthand first, otherwise it erases 'border-image' */ border-image: url("border.png") 30 round; /* but other 'border' properties can be set after */ border-width: thin thick; } ... .sidebar .notebox { box-shadow: 0 0 5px gray; border-radius: 5px; border: none; /* turn off all borders */ /* 'border' shorthand resets 'border-image' */ } ``` -------------------------------- ### Stretch background image to cover content area Source: https://www.w3.org/TR/css-backgrounds-3 Stretches the background image independently in both dimensions to completely cover the content area. Uses background-size: 100% 100% with background-origin: content-box. ```css div { background-image: url(plasma.png); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box } ``` -------------------------------- ### Setting the canvas background with body background Source: https://www.w3.org/TR/css-backgrounds-3 HTML document that sets the canvas background via the body element's background property. The root element has no background, so the body's background is propagated to the canvas, resulting in a marble background. ```html Setting the canvas background

My background is marble.

``` -------------------------------- ### CSS: Border radii that fit within the box height Source: https://www.w3.org/TR/css-backgrounds-3 Specifies border radii that fit within the box height of 2.5em. The height is enough for the radii (0.5em plus 2.0em). ```css box-sizing: border-box; width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em ``` -------------------------------- ### CSS: Border radii that require reduction to fit Source: https://www.w3.org/TR/css-backgrounds-3 Specifies border radii that exceed the box height of 2em. All corners are reduced by a factor of 0.8, resulting in used radii of 0.4em and 1.6em. ```css box-sizing: border-box; width: 6em; height: 2em; border-radius: 0.5em 2em 0.5em 2em ``` -------------------------------- ### CSS: Add padding to prevent overflow with border-radius Source: https://www.w3.org/TR/css-backgrounds-3 Adds padding so contents do not overflow the rounded corners. The background will still have rounded corners even though there is no border. ```css DIV { background: black; color: white; border-radius: 1em; padding: 1em } ``` -------------------------------- ### Set background-color to red Source: https://www.w3.org/TR/css-backgrounds-3 Sets the background color of an h1 element to red using the background-color property. The color is drawn behind any background images and is clipped according to the background-clip value of the bottom-most image layer. ```css h1 { background-color: #F00 } /* Sets background to red. */ ``` -------------------------------- ### Round background image height with background-repeat: round Source: https://www.w3.org/TR/css-backgrounds-3 Rounds the height of the image to 33.3% from the specified 30% when background-repeat is round. The width remains 20% and is not rounded. ```css p { background-image: url(chain.png); background-repeat: no-repeat round; background-size: 20% 30% } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.