Learning Code

Background

With CSS3, there are some really useful additional properties to use when working with backgrounds.

Background-Clip

Background clipping controls the area that a background image "paints" or fills. Values include:
  • border-box: the background image fills the element up to the outer edge of the border area
  • content-box: the background image fills the element only in the content area
  • padding-box: the background image fills the element up to the outer edge of the padding area

In Action

section {background-clip: padding-box;}

Border-box Content-box Padding-box

Background-Origin

Background-origin specifies where the background image begins. Values include:
  • border-box: the background image begins at the upper-left corner of the border
  • content-box: the background image begins at the upper-left corner of the content area
  • padding-box: the background image begins at the upper-left corner of the padding edge

In Action

body {background-origin: border-box;}

Border-box Content-box Padding-box

This is most obvious when there is no repeat.

Background-Size

Background-size gives flexibity in how the size/aspect ratio of the image is displayed. Values include:
  • cover: the background image fills the entire background area of the element (while keeping a locked aspect ratio); this sometimes results in part of the image not displaying
  • contain: the background image fits completely in the background area (while keeping a locked aspect ratio); sometimes this results in an empty section of the background area
  • width and height: specify the width and height values (in that order) for the image in the unit of your choice (aspect ratio of the image can be changed)

In Action

body {background-size: cover;} or main {background-size: 100% 100%;} (100% 100% sets the background to fill the element completely without clipping any of the image - this ignores the aspect ratio)

Cover Contain 100% 100%

Gradients

A Gradient is a smooth transition from one color to another and/or from one value to another. With CSS3 you can make two kinds of gradients - either linear or radial. Colorstop refers to the colors you are changing between. Gradients need a minimum of 2 colorstops but you can have more.

Linear Gradients

Linear gradients move directionally in a straight line. This could be horizontal, vertical, or diagonal.

Syntax

selector {background: linear-gradient(direction, colorstop1, colorstop2);}

Values

Direction: left, right, top, bottom

If you do not set a value for direction, the direction will automatically go from top to bottom.

This gradient has two colorstops: white and cadetblue:
h1 {background: -webkit-linear-gradient(white, cadetblue);
background: -o-linear-gradient(white, cadetblue);
background: -moz-linear-gradient(white, cadetblue);
background: linear-gradient(white, cadetblue);
}


This gradient has 3 colorstops and the left value to go from side to side:
section {background: -webkit-linear-gradient(left, white, cyan, cadetblue);
background: -o-linear-gradient(left, white, cyan, cadetblue);
background: -moz-linear-gradient(left, white, cyan, cadetblue);
background: linear-gradient(to left, white, cyan, cadetblue);}


This diagonal gradient uses 2 values (bottom and left) to go from corner to corner.
section {background: -webkit-linear-gradient(bottom left, white, cadetblue);
background: -o-linear-gradient(bottom left, white, cadetblue);
background: -moz-linear-gradient(bottom left, white, cadetblue);
background: linear-gradient(to bottom left, white, cadetblue);}



If you know the specific angle you would like the gradient, you can use the number of degrees as a value.
li {background: -webkit-linear-gradient(65%, white, cadetblue);
background: -o-linear-gradient(65%, white, cadetblue);
background: -moz-linear-gradient(65%, white, cadetblue);
background: linear-gradient(65%, white, cadetblue);
}

Radial Gradients

Radial gradients are one color in the center and radiate out, changing to another color as it gets closer to the ending boundry.

Syntax

selector {background: radial-gradient( shape, size, colorstop1, colorstop2, colorstop3...);}

Values


Circle
Ellipse

Values for shape are circle and ellipse. If you do not set a value, the default is ellipse:
h1 {background: -webkit-radial-gradient(circle, white, cadetblue);
background: -o-radial-gradient(circle, white, cadetblue);
background: -moz-radial-gradient(circle, white, cadetblue);
background: radial-gradient(circle, white, cadetblue);
}

Values to change the position include closest-side, farthest-side, closest-corner, and farthest-corner. These work in conjuction with horizontal and vertical percentages that change the gradient size. These are all optional values if you do not want to change the size/position. Notice the prefixes have a slighlty different syntax then the default property:

selector { background: radial-gradient(closest-side at % %, colorstop, colorstop);}

The 1st percentage changes the size of the gradient horizontally. The 2nd percentage changes the size of the gradient vertically.
header {background: -webkit-radial-gradient(10% 30%, closest-corner, white, cadetblue);
background: -o-radial-gradient(10% 30%, closest-corner, white, cadetblue);
background: -moz-radial-gradient(10% 30%, closest-corner, white, cadetblue);
background: radial-gradient(closest-corner at 10% 30%, white, cadetblue);}


Values for spacing can be set with each color. Adding a percentage after the color changes the spacing:
selector {background:radial-gradient(colorstop %, colorstop %, colorstop %);}
li {background: -webkit-radial-gradient(#ffffff 10%, #fff111 25%, cadetblue 60%);
background: -o-radial-gradient(#ffffff 10%, #fff111 25%, cadetblue 60%);
background: -moz-radial-gradient(#ffffff 10%, #fff111 25%, cadetblue 60%);
background: radial-gradient(#ffffff 10%, #fff111 25%, cadetblue 60%);}

Repeating Gradients

Both linear and radial gradients can be set to repeat to create a gradient pattern.

Linear

Here is a repeating gradient going from top to bottom. A percentage needs to be set after the last colorstop to cause the repeat. The other colorstops could have set percentages as well but it is the last one that is important.
footer {background: -webkit-repeating-linear-gradient(white,teal,cadetblue 15%)
background: -o-repeating-linear-gradient(white, teal, cadetblue 15%);
background: -moz-repeating-linear-gradient(white, teal, cadetblue 15%);
background: repeating-linear-gradient(white, teal, cadetblue 15%);}

Radial

Again, a percentage needs to be set after the last colorstop to cause the repeat. The other colorstops could have set percentages as well but it is the last one that is important.
p {background: -webkit-repeating-radial-gradient(white,teal,cadetblue 15%)
background: -o-repeating-radial-gradient(white, teal, cadetblue 15%);
background: -moz-repeating-radial-gradient(white, teal, cadetblue 15%);
background: repeating-radial-gradient(white, teal, cadetblue 15%);}

Transparent Gradients

Both linear and radial gradients can be set to different levels of transparency if you use rgba color instead of a hex# or color name.

Linear

Using rgba values as colorstops allows transparency in the gradient. If alpha is set to 1, the color is opaque. If alpha is set to 0, the color is transparent. Numbers between 1 and 0 (such as .5) cause translucency.
section {background: -webkit-linear-gradient(left, rgba(95,158,160,1), rgba(95,158,160,0));
background: -o-linear-gradient(left, rgba(95,158,160,1), rgba(95,158,160,0));
background: -moz-linear-gradient(left, rgba(95,158,160,1), rgba(95,158,160,0));
background: linear-gradient(to left, rgba(95,158,160,1), rgba(95,158,160,0));}

Radial

Again, the first 3 values represent the proportions of red, green, and blue. The last value sets the level of transparency.
h1 {background: -webkit-radial-gradient(rgba(95,158,160,1), rgba(95,158,160,0));
background: -o-radial-gradient(rgba(95,158,160,1), rgba(95,158,160,0));
background: -moz-radial-gradient(rgba(95,158,160,1), rgba(95,158,160,0));
background: radial-gradient(rgba(95,158,160,1), rgba(95,158,160,0));}

Can you use the Try-it Editor to try out these concepts?