The backgrounds and borders module covers the background and border of the box element:

The Box Element

In the official language of the W3.org; when elements are rendered according to the CSS box model, each element is either not displayed at all, or formatted as one or more rectangular boxes. Each box has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. (The margin may actually be negative, but margins have no influence on the background and border.)

Background Properties

The background properties deal with the decoration of the border area and with the background of the content, padding and border areas. They can be potentially multi-layered, meaning that they can layer a number of elements on top of one another, which each layer having a number of controls to determine how that element is presented. Be careful in creating complicated backgrounds, as one mistake can render the entire background property null and void.

Layering Multiple Background Images

multiple background images are “,” separated.

background: url(#), url(#), url(#);

You can set all of the values associated with each background image in the same way, by a repeat use of “,” to separate each value. For Example

	background-repeat: repeat-x, repeat-x, repeat-x,;
	background-position: bottom, top, right;
	background-offset: 20px, 20px, 10px;
	

If you have selected a color in addition to the background images, it is rendered as the bottom layer.

Background Repeat

The background-repeat property is used to repeat the background image.You can use the actual property, repeat-style:, but it is usually tagged on to the end of background: with the values: repeat-x, repeat-y, repeat , no-repeat, and values that will be supported in the future, space and round.

Background Position

The position of the background element places it in relation to the box, with the default being center. If there are two values, the first represents the X (horizontal) Axis and the second represents the Y (vertical) axis. You can also use percentages or pixel values: background-position: top, center, bottom, left, center, right

Background Clip

It is possible that the background peeks out from the border. To keep this from happening, use the background-clip property, which clips the background to one of the following values: background-clip: border-box, padding-box, content-box

When you supply a value of padding-box, the background is clipped relative to the upper left corner of the padding edge. With border-box it’s clipped relative to the upper left corner of the border, and content-box means the background starts from the upper left corner of the box’s content.

Background Resize

Resizing background images requires only one percentage value if the image scaled proportionately, and two percentage values if the image needs to be distorted: Background-size:, length in px or %, auto, cover, contain. The value cover automatically scales the image so the longest side fits inside of the object, while contain scales the image so that the shortest side fits inside of the object, completely filling the background. The background size property works in conjunction with the background attachment property.

Background Attachment

The background image attaches to the content of the element, the element or to the viewport. The initial value is scroll, meaning that the background is attached to the element. It could also be local, meaning that it scrolls with the content inside the element, or it can be fixed, meaning the background is fixed to the viewport, or window.

If the background picture is fixed to the viewport, the element is like a window upon it. The picture will move around if the widow is resized. Change the background attachment to local, and the picture will move with the text. Both fixed and local will change the size of the picture to fit either the viewport or content:

Background Shorthand

It is possible to write all of these at one time (‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’) but if you do try to write a more complicated background, be careful, as one mistake can keep the background from showing. Each background image layer can have the following:

background: bg-image, bg-position, repeat-style, attachment, background-origin, background-clip and the final (bottom) layer can add background-color.

Gradients

Gradients are not part of the background specification yet. They were introduced by Apple in 2008, and since then, the way that you write out the values for the gradient property has changed, so as to make writing them simpler, and will likely change again. Right now, all browsers are standardized on the way that Mozilla writes the values, and that is how they are written here. That means you need Chrome 11 or Safari 5.1 to see them. The older versions of Apple based browsers use the older value style. You also need to use vendor specific prefixes to use this property. There are linear gradients and radial gradients, and the syntax is similar.

A gradient is a transition between a start color and one or more stop colors that has a direction, and optionally, can repeat. If there is no repeat, the last color on either side continues out to the edge of the box, otherwise, the gradient repeats. Here are some examples

Simple gradient with the color being spread out evenly over the colors:

background: -webkit-linear-gradient(red, green, blue);

Adding left changes the direction:

background: -webkit-linear-gradient(left, red, green, blue);

Adding a percentage to the stop specifies where the color is located. If two colors share the same location, the result is a sharp color change.

Radial blends requires the keyword radial

background: -webkit-radial-gradient(circle, white, black);

Repeating Gradient Example:

background: -webkit-repeating-radial-gradient(75% 19%, circle closest-side, #0000ff 2%,#ff00ff 18%);

The gradient uses the background property, but instead of fetching an image, the computer uses the controls given in the value to calculate a background image, which is then used to fill the background.

Linear Gradients

The value of a simple linear gradient like the one on the right is written as linear-gradient(top, #eff6fb, #d3e4f3 68%). It is specified as a linear gradient, that has direction that starts from the top with the color #eff6fb, and proceeds to the last stop, with the color #d3e4f3 occurring at 68% from the top of the element. Its also possible to use length values like pixels or em units to specify the distance. Since the gradient is not repeated, the last stop carries on to the other side of the box.

The direction is specified by the key-word top. All of the sides can be used, top,right,bottom,left, and they can be used in combination, as in top left in the example above. It is also possible to determine the direction by degrees, as in 0deg(left), 90deg(bottom), 180deg(right), 270deg(top).

Adding Transparency

Blends are background images and are layered in the same way as multiple background images, by using a comma to separate the layers. By adding transparency to the color stop it’s possible to show one gradient through another gradient. The following demo shows two superimposed linear gradients, separated by a comma , with transparency from the Hue, Saturation and Luminance Alpha (hsla)color, so that the one shows through the other:

Radial Gradients

If linear gradients follow a single direction, think of radial gradients as all directions emanating out of a single point. The issue is then the location of the center point. The distance from the center then determines the stops. If the distance of the stops are all the same, the shape of the radial gradient is a circle. It is also possible to have an ellipse where the dimensions of the box determined the shape of the ellipse.

You can specify the position of the radial gradient in the same way as you can position anything, using the x and y coordinates, and keywords work just as well: right 100% means that the horizontal placement is all the way on the right and the vertical placement is all the way on the bottom. It is possible to go beyond the box, and make it 120% 120%, for example. It defaults to the center of x or y if either one is missing, and if both are missing, the radial gradient is centered in the box.

By default, the radial gradient covers the whole box, but its possible to specify its size by using keywords that determine the size from its center to the edge or corner that is nearest or furthest from it. That gives us four possible keywords: closest-side, closest-corner, farthest-side, farthest-corner, but they add two more for good measure: contain and cover, which mean the same as closest-side and farthest-corner. The browsers have not implemented it yet, but one day it may also be possible to specify the size numerically.

After the location, shape and size come the color stops. You have to specify a starting color and one or more stop colors, and if you what the blend to be other than evenly distributed, the percentage from the center, similar to how the linear blend is specified. The last stop will determine the color that fills the box if the blend is smaller than the box. Its also possible to use length values like pixels or em units to specify the distance.

Repeating Gradients

It is possible to repeat the blend instead of extend the color of the last stop to the edge of the box. This is done through the keyword repeating at the beginning of the value, for example: background: repeating-linear-gradient(top, #EFF6FB, #d3e4f3 10%). use the same value at both the beginning and the end if you want a smooth transition as the blend repeats.

Gradients Repeated

The possibility of repeating multiple gradients in one backgrounddeclaration opens up an incredible vista for patterns and other uses. Take a look at the next two demonstrations, take from the fantastic patterns created by Lea Veroa. Many of these patterns depend on the use of multiple background layers and use transparency to great effect, and a very careful use of positioning so that one layer sticks out behind the other. You can see how these are constructed by commenting-out or changing one line at a time, or read the article she wrote to explain her methods.

Animated Gradients

Gradients the Easy Way

You can construct your own gradients, and with the interactive code view, its easy to demonstrate and create exactly what you want, but given the visual immediacy of a gradient generator, its sometimes more convenient to use them to help you make the gradient. Here are two: Ultimate CSS Gradient Generator for linear gradients and Western Civilizations’s Radial Gradient. Use the New Style to make your gradients, and not the version that Webkit itself has discontinued.

All in all, gradients are a great leap forward, and support among modern browsers is ok now and will be a sure thing soon enough.

Border Properties

All four sides of a border can be treated with one definition or you can specify the definition for any one side: top, right, bottom, left.

Standard Border

The border usually uses a shorthand where the width, color and style are given in this order: border: 10px solid red;. Leaving any one of these out breaks the border. Here is a list of the styles:

Specifying Each Side Individually

You can also specify different width, color and style for each side of the box, as well as target each side individually. This is most often done to create a horizontal rule somewhere in the design:

Image Border

So you want to use an image for the border. This is not only possible, but powerfully implemented. The code is border-image: url('image.gif') 20 30 40 20 repeat stretch. where the url fetches the image, the next four numbers signify pixel values. Don’t ask me why percentages get the percent sign but the pixel values do not get px added in behind the number. The last signifies the mode in which the middle section is treated.”

As a box has four corners and four sides, a referenced picture is divided into 8 parts (the ninth part, which is discarded by default, represents the fill). This is the picture used for the border, and it is 60px by 60px. The image was divided into thirds with 20 pixels for each corner and 20 pixels for the center section. Blue dividing lines are for demonstration and are not in the border image. If this seems complicated, there is an border image generator to help you prepare your border images.

Here is an example from a student to replace a picture. I first determined the width of the repeating section to be 34px, created a square, combined 9 squares into a finished image and positioned the parts accordingly, copying the bottom from the top and rotating it 180°. That way I could keep the value at 34. Had I calculated each of the borders, I could have set the top and sides. border-image: url(09-border.png) 28 34 repeat; It is possible to set each side, top, right, bottom and left with different settings.

The image border is 6K, 1/25 the size of the original, and much more flexible.

It is possible to repeat the middle image, as above, or to stretch it, as here. There is also a value called round, where the image is repeated to fill the area, and if it does not fill the area with a whole number of tiles, the image is rescaled so that it does. The value space is similar, only it distributes the extra space around the tiled middle. The corners remain the same.

Gradient Borders

• This only works in Firefox. Here is the code for all 4 borders:
  -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;


  Just for fun. CSS3 with a little javascript thrown in.