1

CSS Colors and Backgrounds

 Content 2

1 CSS Colors 4 Color Gradients

2 Foreground and Background Colors

3 Tiling Background Images

 CSS Colors 3

• Two main methods exist to specify colors:

1) Color Names: The most intuitive way to specify a color is to call it by name and
there are only 140 color names in CSS3.
2) Color Values: It is most common to specify a color is by its RGB value which
gives millions of colors.
 CSS Colors … 4

• Two main methods exist to specify colors:

1) Color Names
2) Color Values
 Hexadecimal Values 5

• The hexadecimal numbering system uses 16 digits: 0–9 and A–F. The hex system is
used widely in computing because it reduces the space it takes to store certain
information.

• For example, the RGB values are reduced from three to two digits once they’re
converted to hexadecimal.

• Now that most graphics and web development software provides easy access to
hexadecimal color values.
 RGBa Color 6

• RGBa color allows you to specify a color and make it as transparent or as opaque as
you like.

• The “a” in “RGBa” stands for alpha, which is an additional channel that controls the
level of transparency on a scale from 0 (fully transparent) to 1 (fully opaque).

AA
Transparency
Value

#ff000088
 Foreground Color 7

• The foreground of an element consists of its text and border. You specify a foreground
color with the color property.
 Background Color 8

• Use background-color to apply a background color to any element.

 Clipping the background 9

• CSS3 introduced the background-clip property to give designers more control over
where the painting area begins and ends.
 Opacity 10

• There is another way to make an element slightly see-through, however—the CSS3

opacity property.

• The value for opacity is a number between 0 (completely transparent) and 1

(completely opaque).

• The opacity setting applies to the entire element—both the foreground and the
background. If you want to affect just one use an RGBa.
 Background Images 11

• The background-image property adds a background image to any element. Its

primary job is to provide the location of the image file.
 Background Repeating 12

• Images tile left and right, up and down, when left to their own devices. You can change
this behavior with the background repeat property.

• The remaining keyword values, space and round, attempt to fill the available
background painting area an even number of times.
 Background Position 13

• The background-position property specifies the position of the origin image in the
background.

• You can think of the origin image as the first image that is placed in the background
from which tiling images extend. Here is the property and its various values.
Background Position … 14
 Background Position Origin 15

• When the origin image was placed in the corner of an element, it was placed inside the
border.

• This property defines the boundaries of the background positioning area in the same
way background-clip defined the background painting area
 Background Attachment 16

• The background-attachment property is used to free the background from the

content and allow it to stay fixed in one position while the rest of the content scrolls.

• The local value is useful when an element has its own scrolling mechanism. Instead of
scrolling with the viewport’s scroller, local makes the background image fixed to the
content of the scrolling element.
 Background Size 17

• You can change the size of the image by using the background-size property.
 The Shorthand Background Property 18

• You can use the handy background property to specify all of your background styles in
one declaration.
 Color Gradients 19

• A gradient is a transition from one color to another, sometimes through multiple colors.

• Although they are specified with code, gradients are images. They just happen to be
generated on the fly.

• A gradient image has no intrinsic size or proportions; the size matches the element it
gets applied to. Gradients can be applied anywhere an image may be applied:
background-image, border-image, and list-style-image.

• There are two types of gradients:

1) Linear gradients change colors along a line, from one edge of the element to the
other.
2) Radial gradients start at a point and spread outward in a circular or elliptical
shape.
 Linear Gradients 20

• The linear-gradient() notation provides

the angle of the gradient line and one or
more points along that line where the
pure color is positioned.
 Radial Gradients 21

Radial gradients, like the name says,

radiate out from a point in a circle along a
gradient ray and it always points outward
from the center. At minimum, a radial
gradient requires two color stops.
 Radial Gradients… 21

The radial-gradient() notation allows you to specify the shape, size, and center position
of the gradient:
1) Shape: The shape specified by using the circle or ellipse keywords.

2) Size: If you supply just one length, it is used for both width and height, resulting in
a circle. When you provide two lengths, the first one is the horizontal measurement
and the second is vertical

3) Position: By default, the center of the gradient is positioned at center center, but
can be changed as background-position property syntax with at keyword. There
are four keywords—closest-side, closest-corner, farthestside, and farthest-
corner .
 Repeating Gradients 22

• The repeating-linear-gradient() or repeating-radial-gradient() notation used to

repeat the gradient pattern. The syntax is the same as for single gradients, but adding
“repeating-” causes the pattern to repeat the color stops infinitely in both directions.
 Designing Gradients 23

Use an online gradient tool:

• one option is the Ultimate CSS Gradient
Generator from Colorzilla
(www.colorzilla.com/gradient-editor/).
Simply enter as many color stops as
you’d like, slide the sliders around until
you get the look you want, and then copy
the code.
• The CSS Gradient Generator by
Virtuosoft is another fine option that also
includes support for repeating gradients
(www.virtuosoft.eu/ tools/css-gradient-
generator/).
Thank you