To continue with our first contacts with CSS you will learn colors and backgrounds and their

possible values While reading this course you may try it by yourself by making a new

dabblet (or another online tool) or by making a local file (html and a CSS files)

The color property

The color property is used to change the color of the text This is a quite simple property

color a_color It applies to all elements Event for an image the color will be used for the

alternative text if the latter is displayed

The initial value depends on the web browser (usually black for text blue for an no-visited

hypertext link purple for a hypertext visited link etc)

For an element if the value is not explicitly specified by any selector pointing out it its

foreground value will be inherited ie it will be the one of the parent element And so on

until the web browser finds a color specified by the CSS rules or if there is any such rule the

web browser will use a default value That mechanism is common for all properties that can

inherit their values

Note Some properties are not inherited because it doesnt make sense For

example the margin property (shown in the next subchapter) is of them

Margin defines the space around an element If that space is inherited

once you specify a margin for an element all nested element would have the

same margin so the document will be indented At each depth of the

element inclusion (depth in the tree of the document model) the margin

would be applied and there will be gaps

When a property is not inherited and is not specified in CSS rule the default value is directly

applied by the web browser

There are several possibilities to specify the wished color for the color property or for other

properties using color (background border etc)

The most intuitive way is probably to use the (english) name of the color All such

keywords are listed at httpwwww3orgTRcss3-colorhtml4 (for historically-

used colors) and at httpwwww3orgTRcss3-colorsvg-color (an extended list

based on SVG - Scalable Vector Graphics - colors) For example you can use red

cyan or whitesmoke

In computer science colors are coded by several integers One of such encoding is

RGB (see httpenwikipediaorgwikiRGB_color_model for a complete definition)

used in screens RGB means Red - Green - Blue each canal has a value between 0 and

255 And all colors are built by addition of those canals Thus colors may be defined

by 3 numbers in decimal value or in hexadecimal or even in percentage of the

maximal value For example the red color is rgb(25500) or FF0000 or

rgb(10000) The cyan color is rgb(0255255) or 00FFFF or

rgb(0100100) The whitesmoke is rgb(245245245) or F5F5F or

rgb(969696) For the latter 245255 is about 09608 so approximately 96

AS you have just read the digital value of a color in RGB is given thanks to the

function rgb (with 3 parameters the three values of each canal RG and B) and the

hexadecimal value by appending the hexadecimal value of each canal (in the RGB

order 2 digits by canal) and by prefixing the value with

So to obtain an red text you can use colorred or colorrgb(25500) or

colorFF0000 etc

An alternative is possible with hue-saturation-lightness (HSL see

httpenwikipediaorgwikiHSL_and_HSV) with a function hsl instead of rgb see

httpwwww3orgTRcss3-colorhsl-color)

transparent is a CSS keyword for specifying a fully transparent (invisible) color

Rather than using a fully opaque color or a fully transparent color you may use colors

more or less transparent This is possible by using the alpha canal of a color In CSS

there is the function rgba (or hsla) The rgba function extends the rgb function by

adding a fourth value whose range is between 0 (fully transparent) and 1 (fully

opaque) If you want a semi-transparent red you have to use rgba(2550005)

inherit is a keyword to specify that the used color is inherited from parent element It

is usually useless to use (default value) but it could override unwanted elements

pointed out by a selector You will learn more about this about rules priorities in the

next book

The keyword initial could be used as a value for to specify that the default value is

wanted It has the same kinf of use than inherit

currentColor is a keyword used for specifying the current color used by the web

browser to display the page For the color property this is useless in that case

currentColor is the same than inherit But in case of other property (like border-color

to specify the color of the frame surrounding an element) this is a way to specify to

the web browser use the same color for the border than you are using for the text

The full description of that property and corresponding possible values is available at

httpwwww3orgTRcss3-color

Note the color property is animatable ie when using an animation

(see in few books) the web browser will generate an animation which will

progressively change the color of the text from the initial color to the

final color

The background property

The background property is used to change the background color or to place an image in

background That property is in fact a condensed notation for several properties By changing

the background you may want to specify a color this is background-color property You

may also want to specify an image this is background-image property You have to specify

the image by itself ie the file or url or But if the image is smallest than the area how to

fill empty space How to place the image Or more generally where starts the background

Can the image be stretched Etc

So you will learn here the following concepts

the lsquobackground-colorrsquo property

the lsquobackground-imagersquo property and how to specify an image (or a computed

gradient)

the lsquobackground-repeatrsquo property (for repeating horizontally vertically or not a

smallest image)

the lsquobackground-attachmentrsquo property (for specifying the behavior of the background

in case of scrolling)

the lsquobackground-positionrsquo property (for specifying the position of the image)

the lsquobackground-cliprsquo property (for specifying the limit of the background eg

including borders or not)

the lsquobackground-originrsquo property (for changing the origin of coordinates for

background-position)

the lsquobackground-sizersquo property (for changing the size of the image stretching or

keeping ratio)

the lsquobackgroundrsquo property

and finally how to superimpose several images in background

background-color

The lsquobackground-colorrsquo property is similar to the color property excepted that it modifies

the background of the element The expected values for background-color are the same than

for the color property

Note the background-color property is animatable ie when using an

animation (see in few books) the web browser will generate an animation

which will progressively change the background color from the initial color

to the final color

background-image

The background-image property is used to set a background image (see the last subsection

about background for specifying several images)

The value of the property is none (no image) or an image For CSS an image can be

An url the image is specified by the value notation url(path_to_the_image) where

path_to_the_image may be an url (eg

httpclassroomw3devcampuscompluginfilephp20760mod_labelintrohtml5-

coursepng) or a local path (eg introhtml5-coursepng) The local path is expressed

from the location of the concerned CSS declaration (not from the web page using it if

the locations are different) For example a use of url() for a background is

background-image

url(httpclassroomw3devcampuscompluginfilephp20760mod_labelintrohtml5-

coursepng)

A gradient (a computed image) CSS enables to specify a gradient a gradation of

color Such images are dynamically computed by the web browser There are two

kinds of gradients and a way of repeat them

o The linear-gradient notation aims at producing an image with linear smooth

transitions between specified colors It may have several parameters separated

by a

The first one is optional It indicates the direction of the gradient It

could be an angle in degree eg 180deg (from top to bottom) or

90deg(from left to right) It could be an expression composed of the

word to followed by a keyword among the following ones top

right bottom or left lsquoto toprsquo lsquoto rightrsquo lsquoto bottomrsquo or lsquoto leftrsquo

are respectively equivalent tolsquo0degrsquo lsquo90degrsquo lsquo180degrsquo or lsquo270degrsquo

You may also combine two keywords to specify a corner (eg to top

right) that will be the end of the gradient For example to top right is

expected to be equivalent to 45deg (but the web browser may have

some troubles)

If no direction is specified the default direction is from top to bottom

ie 180deg or to bottom

Note There is no space between a value and its unit For

the direction you will write 90deg If you write

90 deg (with a space) that would be wrong and not

interpreted

The following parameters are color or a couple color

ltposition_from_the_startgt A color is the same than for the color or

the background-color property A ltposition_from_the_startgt

indicates a line (perpendicular to the direction) where the color is

painted with the associated color It could be expressed with a length

(see in the next subchapter with border) or with a percentage If no

indication about position is given the colored lines will be fairly

distributed in space Between colors the web browser will compute a

smoothing transition of color Look at the following example (you can

try it by using the selector body)

background-image linear-gradient(red orange yellow

green blue indigo purple)

It produces the following image

(as background)

The seven colors are fairly

distributed with the red at the

top and the purple at the bottom

Now if you add a position (eg

50) to color (eg orange)

background-image linear-gradient(red orange 50

yellow green blue indigo purple)

Then the red is still at the top the orange is in the middle (50 of the

height) and the 5 remaining color are fairly distributed in the remaining

space ie the second part of the image

Finally if you change the direction of the gradient for example for to

right the gradient will be now horizontal and no more vertical

Note linear-gradient was first supported by web browser

with a prefix like almost all CSS3 novelties each

browser engine having its own prefix For the webkit

engine (Safari and former version of Chrome are based on

webkit) it is -webkit- for Mozilla (used by firefox)

it is -moz- for opera -o- and for internet explorer (but

rarely used) -ms- Nowadays the prefixes are not more

required for latest versions of web browser for the

linear-gradient notation Unfortunately there are

still some prefixed properties So you will have some

times to write several times the same declaration bloc in

order to work on several web browsers (latest or older

versions)

Note If several colors are at the same position only

the last specified color is visible The gradient will be

discontinuous

o A radial-gradient notation aims at producing an image with circular (or

elliptic) smooth transition between specified colors It may have several

parameters separated by a

the first parameter may be composed of 3 information size shape

center_coordinate

The shape is a keyword among circle and ellipse By default

the shape is ellipse is there are zero (both size and shape are

omitted) or two (just shape is omitted but not size) specified

numerical sizes and the shape is circle if there is only one

numerical size (just shape is omitted but not size)

The size determines the size of the last shape (a circle or an

ellipse) after the remaining space if filled with the last specified

color That size could be

a length for example 10rem (see in the next

subchapter with the border property) for a circle

two length andor percentages for an ellipse (the first is

for the horizontal axis percentages are relative to the

width of the element the second is for the vertical axis

percentages are relative to the height of the element)

or a keyword among (i) lsquoclosest-sidersquo (ii) lsquofarthest-

sidersquo (iii) lsquoclosest-cornerrsquo or (iv) lsquofarthest-cornerrsquo

Respectively it means that the shape is sized (the radius

for a circle the two axis for an ellipse) (i) to touch the

closest side of the element (ii) to touch the farthest side

(iii) to pass through the closest corner or (iv) to pass

through the farthest corner The keyword is applied for

the radius of a circle or for the two axes for an ellipse

The default (if omitted) size is farthest-corner

The center_coordinate determines the position of the gradient

inside the element By default (if omitted) the gradient is

centered Possible values will be detail with the lsquobackground-

positionrsquo property (below) At this step it could be a

combination of left center right with top

center bottom So it could be bottom (ie

horizontally centered and at the bottom of the element) or left

bottom (ie centered on the bottom left corner of the element)

or right (ie centered at the middle of the right side) or

The remaining parameters are like for the linear-gradient are color

or a couple color ltposition_from_the_startgt For a circle the

ltposition_from_the_startgt is still valued by a length applied from the

center and following a radius and a percentage represents a percentage

of the greatest radius (last shape)

For an ellipse the ltposition_from_the_startgt is first applied on the

horizontal axis and then the length is reported on the vertical axis by

applying a ratio vertical_axishorizontal_axis

Some examples of radial-gradient (the two first are circle because the

element was square)

a centered rainbow ellipse background-image radial-

gradient(red orange

yellow green blue indigo

purple)

an ellipse centered on the bottom

left corner

background-image radial-

gradient(at right bottom

red orange yellow green

blue indigo purple)

a rainbow made with a radial gradient CCFFFF is the color of

the (light) blue sky the colored rainbow ellipses size are

between 50 and 78 (fairly distributed every 4) of the

distance between the middle of the bottom side with the highest

corners the color of the sky is used in the middle and in the

external side if the ellipse background-image radial-

gradient(at bottom CCFFFF

50 red orange yellow

green blue indigo purple

78 CCFFFF 78)

o the repeating-linear-gradient()rsquo and lsquorepeating-radial-gradient()rsquo notations

respectively work like linear-gradient and radial-gradient but once the

gradient finished it is applied again So if the last color is the same that the

first there will be a continuity in the colors

Note linear-gradient and radial-gradient are powerful

tools quite complex They avoid us to use an image of 1 pixel

in width (or height) and to horizontally (or vertically) repeat

it see background-repeat property below) But usually there

are only two values (the first color and the last color) like

the following for a vertical gradient for a

dark blue to a lighter blue

background-image linear-gradient(darkblue

cornflowerblue 50)

As many CSS properties values or notations

the definitions often contain more detail

than you will use It doesnt matter

Moreover you will be ready for more

difficult situations -)

Specifications about image fragments (specifying a subpart of an image) are not

implemented yet

The full specification of background-image is at httpwwww3orgTRcss3-

backgroundthe-background-image

The full specification of an image in CSS (all in not supported in the browsers) is

at httpwwww3orgTRcss3-images

background-repeat

The background-repeat property is used to tile the background image The repetition of the

image is based on a first image placed notably thanks to background-position and

background-size properties (see below) The value of background-repeat is made of the

use of two keywords the first one for the horizontal repetition (or not) the second one for the

vertical If only one keyword is used it will be used for the two axis The keywords are

lsquorepeatrsquo for repeating the original image in the corresponding direction (horizontal if

this is the first keyword vertical if this is the second keyword) in order to cover the

background of the element in that dimension (width if this is the first keyword height

if this is the second keyword) All image paintings are collapsed and images nearest to

the edges may be truncated

lsquospacersquo for repeating the original image in the corresponding direction but without

truncated any image So the maximal number of image representations without cutting

an image in that dimension is computed The remaining space is fairly distributed

between all image representation the first and the last touching the corresponding

edge (left and right or top and bottom)

lsquoroundrsquo for repeating the original image by filling all the space and without truncating

any image So the original image may be resized in order to correspond to those

constrains

lsquono-repeatrsquo in order to not repeat the image in this direction

Additionally there are two shortcuts

lsquorepeat-xrsquo equivalent to lsquorepeat no-repeatrsquo for repeating only horizontally

right bottom or left lsquoto toprsquo lsquoto rightrsquo lsquoto bottomrsquo or lsquoto leftrsquo

are respectively equivalent tolsquo0degrsquo lsquo90degrsquo lsquo180degrsquo or lsquo270degrsquo

You may also combine two keywords to specify a corner (eg to top

right) that will be the end of the gradient For example to top right is

expected to be equivalent to 45deg (but the web browser may have

some troubles)

If no direction is specified the default direction is from top to bottom

ie 180deg or to bottom

Note There is no space between a value and its unit For

the direction you will write 90deg If you write

90 deg (with a space) that would be wrong and not

interpreted

The following parameters are color or a couple color

ltposition_from_the_startgt A color is the same than for the color or

the background-color property A ltposition_from_the_startgt

indicates a line (perpendicular to the direction) where the color is

painted with the associated color It could be expressed with a length

(see in the next subchapter with border) or with a percentage If no

indication about position is given the colored lines will be fairly

distributed in space Between colors the web browser will compute a

smoothing transition of color Look at the following example (you can

try it by using the selector body)

background-image linear-gradient(red orange yellow

green blue indigo purple)

It produces the following image

(as background)

The seven colors are fairly

distributed with the red at the

top and the purple at the bottom

Now if you add a position (eg

50) to color (eg orange)

background-image linear-gradient(red orange 50

yellow green blue indigo purple)

Then the red is still at the top the orange is in the middle (50 of the

height) and the 5 remaining color are fairly distributed in the remaining

space ie the second part of the image

Finally if you change the direction of the gradient for example for to

right the gradient will be now horizontal and no more vertical

Note linear-gradient was first supported by web browser

with a prefix like almost all CSS3 novelties each

browser engine having its own prefix For the webkit

engine (Safari and former version of Chrome are based on

webkit) it is -webkit- for Mozilla (used by firefox)

it is -moz- for opera -o- and for internet explorer (but

rarely used) -ms- Nowadays the prefixes are not more

required for latest versions of web browser for the

linear-gradient notation Unfortunately there are

still some prefixed properties So you will have some

times to write several times the same declaration bloc in

order to work on several web browsers (latest or older

versions)

Note If several colors are at the same position only

the last specified color is visible The gradient will be

discontinuous

o A radial-gradient notation aims at producing an image with circular (or

elliptic) smooth transition between specified colors It may have several

parameters separated by a

the first parameter may be composed of 3 information size shape

center_coordinate

The shape is a keyword among circle and ellipse By default

the shape is ellipse is there are zero (both size and shape are

omitted) or two (just shape is omitted but not size) specified

numerical sizes and the shape is circle if there is only one

numerical size (just shape is omitted but not size)

The size determines the size of the last shape (a circle or an

ellipse) after the remaining space if filled with the last specified

color That size could be

a length for example 10rem (see in the next

subchapter with the border property) for a circle

two length andor percentages for an ellipse (the first is

for the horizontal axis percentages are relative to the

width of the element the second is for the vertical axis

percentages are relative to the height of the element)

or a keyword among (i) lsquoclosest-sidersquo (ii) lsquofarthest-

sidersquo (iii) lsquoclosest-cornerrsquo or (iv) lsquofarthest-cornerrsquo

Respectively it means that the shape is sized (the radius

for a circle the two axis for an ellipse) (i) to touch the

closest side of the element (ii) to touch the farthest side

(iii) to pass through the closest corner or (iv) to pass

through the farthest corner The keyword is applied for

the radius of a circle or for the two axes for an ellipse

The default (if omitted) size is farthest-corner

The center_coordinate determines the position of the gradient

inside the element By default (if omitted) the gradient is

centered Possible values will be detail with the lsquobackground-

positionrsquo property (below) At this step it could be a

combination of left center right with top

center bottom So it could be bottom (ie

horizontally centered and at the bottom of the element) or left

bottom (ie centered on the bottom left corner of the element)

or right (ie centered at the middle of the right side) or

The remaining parameters are like for the linear-gradient are color

or a couple color ltposition_from_the_startgt For a circle the

ltposition_from_the_startgt is still valued by a length applied from the

center and following a radius and a percentage represents a percentage

of the greatest radius (last shape)

For an ellipse the ltposition_from_the_startgt is first applied on the

horizontal axis and then the length is reported on the vertical axis by

applying a ratio vertical_axishorizontal_axis

Some examples of radial-gradient (the two first are circle because the

element was square)

a centered rainbow ellipse background-image radial-

gradient(red orange

yellow green blue indigo

purple)

an ellipse centered on the bottom

left corner

background-image radial-

gradient(at right bottom

red orange yellow green

blue indigo purple)

a rainbow made with a radial gradient CCFFFF is the color of

the (light) blue sky the colored rainbow ellipses size are

between 50 and 78 (fairly distributed every 4) of the

distance between the middle of the bottom side with the highest

corners the color of the sky is used in the middle and in the

external side if the ellipse background-image radial-

gradient(at bottom CCFFFF

50 red orange yellow

green blue indigo purple

78 CCFFFF 78)

o the repeating-linear-gradient()rsquo and lsquorepeating-radial-gradient()rsquo notations

respectively work like linear-gradient and radial-gradient but once the

gradient finished it is applied again So if the last color is the same that the

first there will be a continuity in the colors

Note linear-gradient and radial-gradient are powerful

tools quite complex They avoid us to use an image of 1 pixel

in width (or height) and to horizontally (or vertically) repeat

it see background-repeat property below) But usually there

are only two values (the first color and the last color) like

the following for a vertical gradient for a

dark blue to a lighter blue

background-image linear-gradient(darkblue

cornflowerblue 50)

As many CSS properties values or notations

the definitions often contain more detail

than you will use It doesnt matter

Moreover you will be ready for more

difficult situations -)

Specifications about image fragments (specifying a subpart of an image) are not

implemented yet

The full specification of background-image is at httpwwww3orgTRcss3-

backgroundthe-background-image

The full specification of an image in CSS (all in not supported in the browsers) is

at httpwwww3orgTRcss3-images

background-repeat

The background-repeat property is used to tile the background image The repetition of the

image is based on a first image placed notably thanks to background-position and

background-size properties (see below) The value of background-repeat is made of the

use of two keywords the first one for the horizontal repetition (or not) the second one for the

vertical If only one keyword is used it will be used for the two axis The keywords are

lsquorepeatrsquo for repeating the original image in the corresponding direction (horizontal if

this is the first keyword vertical if this is the second keyword) in order to cover the

background of the element in that dimension (width if this is the first keyword height

if this is the second keyword) All image paintings are collapsed and images nearest to

the edges may be truncated

lsquospacersquo for repeating the original image in the corresponding direction but without

truncated any image So the maximal number of image representations without cutting

an image in that dimension is computed The remaining space is fairly distributed

between all image representation the first and the last touching the corresponding

edge (left and right or top and bottom)

lsquoroundrsquo for repeating the original image by filling all the space and without truncating

any image So the original image may be resized in order to correspond to those

constrains

lsquono-repeatrsquo in order to not repeat the image in this direction

Additionally there are two shortcuts

lsquorepeat-xrsquo equivalent to lsquorepeat no-repeatrsquo for repeating only horizontally

Note linear-gradient was first supported by web browser

with a prefix like almost all CSS3 novelties each

browser engine having its own prefix For the webkit

engine (Safari and former version of Chrome are based on

webkit) it is -webkit- for Mozilla (used by firefox)

it is -moz- for opera -o- and for internet explorer (but

rarely used) -ms- Nowadays the prefixes are not more

required for latest versions of web browser for the

linear-gradient notation Unfortunately there are

still some prefixed properties So you will have some

times to write several times the same declaration bloc in

order to work on several web browsers (latest or older

versions)

Note If several colors are at the same position only

the last specified color is visible The gradient will be

discontinuous

o A radial-gradient notation aims at producing an image with circular (or

elliptic) smooth transition between specified colors It may have several

parameters separated by a

the first parameter may be composed of 3 information size shape

center_coordinate

The shape is a keyword among circle and ellipse By default

the shape is ellipse is there are zero (both size and shape are

omitted) or two (just shape is omitted but not size) specified

numerical sizes and the shape is circle if there is only one

numerical size (just shape is omitted but not size)

The size determines the size of the last shape (a circle or an

ellipse) after the remaining space if filled with the last specified

color That size could be

a length for example 10rem (see in the next

subchapter with the border property) for a circle

two length andor percentages for an ellipse (the first is

for the horizontal axis percentages are relative to the

width of the element the second is for the vertical axis

percentages are relative to the height of the element)

or a keyword among (i) lsquoclosest-sidersquo (ii) lsquofarthest-

sidersquo (iii) lsquoclosest-cornerrsquo or (iv) lsquofarthest-cornerrsquo

Respectively it means that the shape is sized (the radius

for a circle the two axis for an ellipse) (i) to touch the

closest side of the element (ii) to touch the farthest side

(iii) to pass through the closest corner or (iv) to pass

through the farthest corner The keyword is applied for

the radius of a circle or for the two axes for an ellipse

The default (if omitted) size is farthest-corner

The center_coordinate determines the position of the gradient

inside the element By default (if omitted) the gradient is

centered Possible values will be detail with the lsquobackground-

positionrsquo property (below) At this step it could be a

combination of left center right with top

center bottom So it could be bottom (ie

horizontally centered and at the bottom of the element) or left

bottom (ie centered on the bottom left corner of the element)

or right (ie centered at the middle of the right side) or

The remaining parameters are like for the linear-gradient are color

or a couple color ltposition_from_the_startgt For a circle the

ltposition_from_the_startgt is still valued by a length applied from the

center and following a radius and a percentage represents a percentage

of the greatest radius (last shape)

For an ellipse the ltposition_from_the_startgt is first applied on the

horizontal axis and then the length is reported on the vertical axis by

applying a ratio vertical_axishorizontal_axis

Some examples of radial-gradient (the two first are circle because the

element was square)

a centered rainbow ellipse background-image radial-

gradient(red orange

yellow green blue indigo

purple)

an ellipse centered on the bottom

left corner

background-image radial-

gradient(at right bottom

red orange yellow green

blue indigo purple)

a rainbow made with a radial gradient CCFFFF is the color of

the (light) blue sky the colored rainbow ellipses size are

between 50 and 78 (fairly distributed every 4) of the

distance between the middle of the bottom side with the highest

corners the color of the sky is used in the middle and in the

external side if the ellipse background-image radial-

gradient(at bottom CCFFFF

50 red orange yellow

green blue indigo purple

78 CCFFFF 78)

o the repeating-linear-gradient()rsquo and lsquorepeating-radial-gradient()rsquo notations

respectively work like linear-gradient and radial-gradient but once the

gradient finished it is applied again So if the last color is the same that the

first there will be a continuity in the colors

Note linear-gradient and radial-gradient are powerful

tools quite complex They avoid us to use an image of 1 pixel

in width (or height) and to horizontally (or vertically) repeat

it see background-repeat property below) But usually there

are only two values (the first color and the last color) like

the following for a vertical gradient for a

dark blue to a lighter blue

background-image linear-gradient(darkblue

cornflowerblue 50)

As many CSS properties values or notations

the definitions often contain more detail

than you will use It doesnt matter

Moreover you will be ready for more

difficult situations -)

Specifications about image fragments (specifying a subpart of an image) are not

implemented yet

The full specification of background-image is at httpwwww3orgTRcss3-

backgroundthe-background-image

The full specification of an image in CSS (all in not supported in the browsers) is

at httpwwww3orgTRcss3-images

background-repeat

The background-repeat property is used to tile the background image The repetition of the

image is based on a first image placed notably thanks to background-position and

background-size properties (see below) The value of background-repeat is made of the

use of two keywords the first one for the horizontal repetition (or not) the second one for the

vertical If only one keyword is used it will be used for the two axis The keywords are

lsquorepeatrsquo for repeating the original image in the corresponding direction (horizontal if

this is the first keyword vertical if this is the second keyword) in order to cover the

background of the element in that dimension (width if this is the first keyword height

if this is the second keyword) All image paintings are collapsed and images nearest to

the edges may be truncated

lsquospacersquo for repeating the original image in the corresponding direction but without

truncated any image So the maximal number of image representations without cutting

an image in that dimension is computed The remaining space is fairly distributed

between all image representation the first and the last touching the corresponding

edge (left and right or top and bottom)

lsquoroundrsquo for repeating the original image by filling all the space and without truncating

any image So the original image may be resized in order to correspond to those

constrains

lsquono-repeatrsquo in order to not repeat the image in this direction

Additionally there are two shortcuts

lsquorepeat-xrsquo equivalent to lsquorepeat no-repeatrsquo for repeating only horizontally

horizontally centered and at the bottom of the element) or left

bottom (ie centered on the bottom left corner of the element)

or right (ie centered at the middle of the right side) or

The remaining parameters are like for the linear-gradient are color

or a couple color ltposition_from_the_startgt For a circle the

ltposition_from_the_startgt is still valued by a length applied from the

center and following a radius and a percentage represents a percentage

of the greatest radius (last shape)

For an ellipse the ltposition_from_the_startgt is first applied on the

horizontal axis and then the length is reported on the vertical axis by

applying a ratio vertical_axishorizontal_axis

Some examples of radial-gradient (the two first are circle because the

element was square)

a centered rainbow ellipse background-image radial-

gradient(red orange

yellow green blue indigo

purple)

an ellipse centered on the bottom

left corner

background-image radial-

gradient(at right bottom

red orange yellow green

blue indigo purple)

a rainbow made with a radial gradient CCFFFF is the color of

the (light) blue sky the colored rainbow ellipses size are

between 50 and 78 (fairly distributed every 4) of the

distance between the middle of the bottom side with the highest

corners the color of the sky is used in the middle and in the

external side if the ellipse background-image radial-

gradient(at bottom CCFFFF

50 red orange yellow

green blue indigo purple

78 CCFFFF 78)

o the repeating-linear-gradient()rsquo and lsquorepeating-radial-gradient()rsquo notations

respectively work like linear-gradient and radial-gradient but once the

gradient finished it is applied again So if the last color is the same that the

first there will be a continuity in the colors

Note linear-gradient and radial-gradient are powerful

tools quite complex They avoid us to use an image of 1 pixel

in width (or height) and to horizontally (or vertically) repeat

it see background-repeat property below) But usually there

are only two values (the first color and the last color) like

the following for a vertical gradient for a

dark blue to a lighter blue

background-image linear-gradient(darkblue

cornflowerblue 50)

As many CSS properties values or notations

the definitions often contain more detail

than you will use It doesnt matter

Moreover you will be ready for more

difficult situations -)

Specifications about image fragments (specifying a subpart of an image) are not

implemented yet

The full specification of background-image is at httpwwww3orgTRcss3-

backgroundthe-background-image

The full specification of an image in CSS (all in not supported in the browsers) is

at httpwwww3orgTRcss3-images

background-repeat

The background-repeat property is used to tile the background image The repetition of the

image is based on a first image placed notably thanks to background-position and

background-size properties (see below) The value of background-repeat is made of the

use of two keywords the first one for the horizontal repetition (or not) the second one for the

vertical If only one keyword is used it will be used for the two axis The keywords are

lsquorepeatrsquo for repeating the original image in the corresponding direction (horizontal if

this is the first keyword vertical if this is the second keyword) in order to cover the

background of the element in that dimension (width if this is the first keyword height

if this is the second keyword) All image paintings are collapsed and images nearest to

the edges may be truncated

lsquospacersquo for repeating the original image in the corresponding direction but without

truncated any image So the maximal number of image representations without cutting

an image in that dimension is computed The remaining space is fairly distributed

between all image representation the first and the last touching the corresponding

edge (left and right or top and bottom)

lsquoroundrsquo for repeating the original image by filling all the space and without truncating

any image So the original image may be resized in order to correspond to those

constrains

lsquono-repeatrsquo in order to not repeat the image in this direction

Additionally there are two shortcuts

lsquorepeat-xrsquo equivalent to lsquorepeat no-repeatrsquo for repeating only horizontally

Note linear-gradient and radial-gradient are powerful

tools quite complex They avoid us to use an image of 1 pixel

in width (or height) and to horizontally (or vertically) repeat

it see background-repeat property below) But usually there

are only two values (the first color and the last color) like

the following for a vertical gradient for a

dark blue to a lighter blue

background-image linear-gradient(darkblue

cornflowerblue 50)

As many CSS properties values or notations

the definitions often contain more detail

than you will use It doesnt matter

Moreover you will be ready for more

difficult situations -)

Specifications about image fragments (specifying a subpart of an image) are not

implemented yet

The full specification of background-image is at httpwwww3orgTRcss3-

backgroundthe-background-image

The full specification of an image in CSS (all in not supported in the browsers) is

at httpwwww3orgTRcss3-images

background-repeat

The background-repeat property is used to tile the background image The repetition of the

image is based on a first image placed notably thanks to background-position and

background-size properties (see below) The value of background-repeat is made of the

use of two keywords the first one for the horizontal repetition (or not) the second one for the

vertical If only one keyword is used it will be used for the two axis The keywords are

lsquorepeatrsquo for repeating the original image in the corresponding direction (horizontal if

this is the first keyword vertical if this is the second keyword) in order to cover the

background of the element in that dimension (width if this is the first keyword height

if this is the second keyword) All image paintings are collapsed and images nearest to

the edges may be truncated

lsquospacersquo for repeating the original image in the corresponding direction but without

truncated any image So the maximal number of image representations without cutting

an image in that dimension is computed The remaining space is fairly distributed

between all image representation the first and the last touching the corresponding

edge (left and right or top and bottom)

lsquoroundrsquo for repeating the original image by filling all the space and without truncating

any image So the original image may be resized in order to correspond to those

constrains

lsquono-repeatrsquo in order to not repeat the image in this direction

Additionally there are two shortcuts

lsquorepeat-xrsquo equivalent to lsquorepeat no-repeatrsquo for repeating only horizontally

lsquorepeat-yrsquo equivalent to lsquono-repeat repeatrsquo for repeating only vertically

Let have a look on some examples

background-image url(httpwwww3orgIconsw3c_home)

background-repeat repeat

This first background-repeat example shows the default repetition horizontally and

vertically Last images are clipped

background-image url(httpwwww3orgIconsw3c_home)

background-repeat repeat-x

The second example is almost the same than the previous one but with only horizontal

repetitions

background-image url(httpwwww3orgIconsw3c_home)

background-repeat space round

The last example illustrates the space repetition horizontally the images are fairly

distributed and you can see (white) space between two columns of image It also illustrates

the round repetition vertically the images are resized (their height is enlarged) they are

only 3 full-displayed images (there was almost 32 in the first example) and there is no space

between two rows of image

The full specification of background-repeat is at httpwwww3orgTRcss3-

backgroundthe-background-repeat

background-attachment

The background-attachment property is used to set the behavior of the background image in

case of scrolling When an user will use a scroll bar will the background image scroll with the

content or stay fixe In fact there are three possible values for background-attachment

With the value scroll the default value if this property is not specified the

background image is scrolled only if the element itself has a scroll bar

With the value fixed the background image seems to be attach to the browser

windows and when a scroll bar is used (the one of the page or the one of the element)

the image stays fixe and the content looks sliding on it

With the value local the background image of an element E is attached to the

elements included in E When a scroll bar is used in a nested element in E the

background image of E follows the same scroll

3 examples are available at httpdabbletcomgist9298d9dc48af05e6f251

The full specification of background-attachment is at httpwwww3orgTRcss3-

backgroundthe-background-attachment

background-position

The background-position property is used to set the location of the image in the element By

default the (first is repeated) image is placed above on the left (the left top corner of the image

coincides with the left top corner of the element) You can change that by specifying two

values a first one for the horizontal position and a second one for the vertical position Such

positions may be a length (see in the next subchapter with border) a percentage or a keyword

(the keywords are different for a horizontal or a vertical position)

If only one value is specified the second value is center by default (at the middle)

If that only specified value is a percentage or a length that value is applied to the

horizontal position

The last example illustrates the space repetition horizontally the images are fairly

distributed and you can see (white) space between two columns of image It also illustrates

the round repetition vertically the images are resized (their height is enlarged) they are

only 3 full-displayed images (there was almost 32 in the first example) and there is no space

between two rows of image

The full specification of background-repeat is at httpwwww3orgTRcss3-

backgroundthe-background-repeat

background-attachment

The background-attachment property is used to set the behavior of the background image in

case of scrolling When an user will use a scroll bar will the background image scroll with the

content or stay fixe In fact there are three possible values for background-attachment

With the value scroll the default value if this property is not specified the

background image is scrolled only if the element itself has a scroll bar

With the value fixed the background image seems to be attach to the browser

windows and when a scroll bar is used (the one of the page or the one of the element)

the image stays fixe and the content looks sliding on it

With the value local the background image of an element E is attached to the

elements included in E When a scroll bar is used in a nested element in E the

background image of E follows the same scroll

3 examples are available at httpdabbletcomgist9298d9dc48af05e6f251

The full specification of background-attachment is at httpwwww3orgTRcss3-

backgroundthe-background-attachment

background-position

The background-position property is used to set the location of the image in the element By

default the (first is repeated) image is placed above on the left (the left top corner of the image

coincides with the left top corner of the element) You can change that by specifying two

values a first one for the horizontal position and a second one for the vertical position Such

positions may be a length (see in the next subchapter with border) a percentage or a keyword

(the keywords are different for a horizontal or a vertical position)

If only one value is specified the second value is center by default (at the middle)

If that only specified value is a percentage or a length that value is applied to the

horizontal position

If that only specified value is a keyword the keyword enables the web browser to

identify if it is for a horizontal position or a vertical one It that case the center

default value is apply to the remaining dimension

A length is a distance from the top left corner of the element following the corresponding

axis to the left corner of the image

A percentage is computed as a length whose value is the ratio (the ) of the corresponding

dimension (width or height) but between the top left corner of the element with a point of the

image which is placed in the image following the same dimension and at a distance of the

ratio (the ) of the size of the image For example (illustrated by the image below) if the

width of the element is 400 pixels and the width of the image is 100 pixels and if the

percentage is 75 the vertical line at 300 pixels (75 of 400) from the top left corner of the

element will coincide with the vertical line at 75 pixels (75 of 100) from the top left corner

of the image The horizontal distance between the left top corner of image and the one of the

element will be 300 - 75 = 225 pixels

Keywords are explicit but could be translated in percentage The horizontal keywords are

left equivalent to 0 places the left edge of the image against the left edge of the

element

center equivalent to 50 horizontally centers the image in the element That is to

say there will be the same space between the left edge of the element and the left edge

of the image than between the right edge of the image and the right edge of the

element

right equivalent to 100 places the right edge of the image against the right edge

of the element

The vertical keywords are

top equivalent to 0 places the top edge of the image against the top edge of the

element

center equivalent to 50 vertically centers the image in the element That is to say

there will be the same space between the top edge of the element and the top edge of

the image than between the bottom edge of the image and the bottom edge of the

element

bottom equivalent to 100 places the bottom edge of the image against the bottom

edge of the element

Examples are available at httpdabbletcomgist6fcd978e2f3f0078867c

The full specification of background-position is at httpwwww3orgTRcss3-

backgroundthe-background-position

Note the background-position property is animatable

background-clip

The background-clip property is used to specify how to draw the background (with image

orand just with a color) inside the element Do the lines painting the edge are drawn over the

background Is the background paint over the padding spaces (internal margin empty spaces

between the edges and the content - see next subchapter) So the background-clip property

can be set by one of the following 3 keywords

lsquoborder-boxrsquo the background is painted even under the lines drawing the edges of the

element Those lines are painted over the background border-box is the default

value

lsquopadding-boxrsquo the background is painted in the whole area of the element excepted

under the lines drawing the edges of the element

lsquocontent-boxrsquo the background is painted inside the element but not under the lines

drawing the edges of the element and not in the empty spaces separating the edge from

the content (see the padding property in the next subchapter)

The background may be clipped in the 3 cases

3 examples are available at httpdabbletcomgist3ba9984c9d8c98d0a1a1

The full specification of backgroun-clip is at httpwwww3orgTRcss3-backgroundthe-

background-clip

background-origin

The background-origin property is used to specify the starting point for placing the

background Indeed it is about the Cartesian coordinate system of reference where is placed

the background The axes of that coordinate system are the horizontal (from left to right) and

the vertical (from top to bottom) The origin has to be determined by specifying the

background-origin property with one of the following keywords

lsquoborder-boxrsquo the origin is the top left corner the point (you can approximate with

pixel) the most on the left and on the top of the element That origin may be part of the

lines drawing the edges (see border in the next subchapter)

lsquopadding-boxrsquo the origin is the point closest to the left top corner of the element but

that point is not part of the lines drawing the edges padding-box is the default value

Examples are available at httpdabbletcomgist6fcd978e2f3f0078867c

The full specification of background-position is at httpwwww3orgTRcss3-

backgroundthe-background-position

Note the background-position property is animatable

background-clip

The background-clip property is used to specify how to draw the background (with image

orand just with a color) inside the element Do the lines painting the edge are drawn over the

background Is the background paint over the padding spaces (internal margin empty spaces

between the edges and the content - see next subchapter) So the background-clip property

can be set by one of the following 3 keywords

lsquoborder-boxrsquo the background is painted even under the lines drawing the edges of the

element Those lines are painted over the background border-box is the default

value

lsquopadding-boxrsquo the background is painted in the whole area of the element excepted

under the lines drawing the edges of the element

lsquocontent-boxrsquo the background is painted inside the element but not under the lines

drawing the edges of the element and not in the empty spaces separating the edge from

the content (see the padding property in the next subchapter)

The background may be clipped in the 3 cases

3 examples are available at httpdabbletcomgist3ba9984c9d8c98d0a1a1

The full specification of backgroun-clip is at httpwwww3orgTRcss3-backgroundthe-

background-clip

background-origin

The background-origin property is used to specify the starting point for placing the

background Indeed it is about the Cartesian coordinate system of reference where is placed

the background The axes of that coordinate system are the horizontal (from left to right) and

the vertical (from top to bottom) The origin has to be determined by specifying the

background-origin property with one of the following keywords

lsquoborder-boxrsquo the origin is the top left corner the point (you can approximate with

pixel) the most on the left and on the top of the element That origin may be part of the

lines drawing the edges (see border in the next subchapter)

lsquopadding-boxrsquo the origin is the point closest to the left top corner of the element but

that point is not part of the lines drawing the edges padding-box is the default value

lsquocontent-boxrsquo the origin is the point closest to the left top corner of the element but

that point is not part of the lines drawing the edges nor that point is not in empty

spaces defined by internal margins (see padding in the next subchapter)

3 examples are available at httpdabbletcomgist6ea576017a56fad179c3

The full specification of background-origin is at httpwwww3orgTRcss3-

backgroundthe-background-origin

background-size

The background-size property is used to specify the size of the background-image Thus

you can change the original size of the background image without producing new image

This enables you to use image without knowing the size of the element that will be

backgrounded by the image Or if your element is enlarged (or reduced) its background

will

The possible values for background-size are

cover the image is resized but not deformed (the initial aspect ratio between

widthheight is kept) Only one image fills the background so both its width and its

height must be tall enough The computed image is generally clipped If background-

origin is set to padding-box (default value) and if there are lines drawing the left or

top edges parts of repeated images are visible under the such lines

contain the image is resized but not deformed (the initial aspect ratio between

widthheight is kept) The entire computed image fits inside the background area So

the first displayed image (before repeating) is not clipped

A couple of two values (separated by a white space) among one (or two) length one

(or two) percentage or the keyword auto The first value is for the width of the

image The second (if any) is for the height of the image If the second value is

omitted then it will be set to auto by default

A percentage is relative to the corresponding dimension (width for the first value

height for the second) of the background area (ie the area where is painted the

background see background-clip)

A length is simply applied to the corresponding dimension

auto will let the corresponding original dimension of the image unchanged

The background-size property may be in conflict with background-repeat when the value

round is used one or two times because the two properties may change the size of the

background image For more information see the full specification of background-size at

httpwwww3orgTRcss3-backgroundthe-background-size

5 examples are available at httpdabbletcomgistc6b047a8b9829b0c79f7

Note the background-position property is animatable when keywords are

not used

Note thanks to the background-size CSS3 property changing the size of

the background (eg full-filled background without knowing by advance the

size of the pagehtml element) is now simpler Before you needed to use

Javascript

background

So there are 8 properties to specify a background lsquobackground-colorrsquo

lsquobackground-imagersquo lsquobackground-repeatrsquo lsquobackground-attachmentrsquo lsquobackground-positionrsquo

lsquobackground-cliprsquo lsquobackground-originrsquo and lsquobackground-sizersquo A priori you have to write 8

declarations (excepted for those with acceptable default value) CSS supplies a shortened

notation the background property In one line you can specify using white space to separate

specifications

lsquobackground-imagersquo (like the property) - or not

lsquobackground-positionrsquo - or not

o if you specify lsquobackground-positionrsquo then you may specify lsquobackground-sizersquo

separating the two (or four) similar values by a character

lsquobackground-repeatrsquo - or not

lsquobackground-attachmentrsquo - or not

lsquobackground-originrsquo and lsquobackground-cliprsquo - or not (for the two at once) As the two

properties has the same possible values (the same keywords) if you specify one value

(among lsquopadding-boxrsquo lsquoborder-boxrsquo or lsquocontent-boxrsquo) that value will be affected to

the two properties If you specify two values the first one is for lsquobackground-originrsquo

and the second one will be for lsquobackground-cliprsquo

Finally you could specify (or not) a lsquobackground-colorrsquo

If you specify both a color and an image as a background if the image is (partially)

transparent you will see the color above by transparency If the image is not available (eg

bad url or unreachable on the web) you will see the color

You may use the background property and after (not before the order of the declaration is

very important you will know why in the next book) some properties It will be cumulative

This is more useful if you have several superposed backgrounds as explained in the next

subsection

But before this is an example of declaring the background on a line is at

httpdabbletcomgistc1e399c986b3fbf9a223 You can play with it and change the values

divoneline

background

url(httpclassroomw3devcampuscomthemeimagephpessentialtheme14054

17959bgbody) 0 0 100px 100px repeat space fixed border-box

lightgray

The image is those of the W3C moodle 0 0 100px 100px is the default values for

positioning but it reduces the image from 252x230 pixels to 100x100 pixels repeat round is

for the repetition horizontally repeating and filling the vertical space In the screen shot

below the image is vertically displayed 3 times but the last is clipped because of the

combination of background-size and background-repeat fixed has a visible effect when

you scroll the page border-box is for both lsquobackground-originrsquo and lsquobackground-cliprsquo And

lightgray is a background color under the image visible because the specified image is

transparent The example contains extra declarations (for border paddingagrave in order to easily

see effect of some values (like content-box)

The specification of background is at httpwwww3orgTRcss3-backgroundthe-

background-attachment

Superimposing several images in background

With CSS it is possible de use several superposed backgrounds More than a color under a

transparent image you may use several imagesgradient which will be superposed Thus you

may dynamically (with server side programs or with JavaScript programs or even with

some CSS selectors like hover or active see next book) compose your background by

adding (or not) some images Your backgrounds could depend on the page content or

anything you want from the moment you program it -)

Except for background-color which is unique all other background-related properties (the 7

others plus background) may have several values separated by a

The positions of the values in the line for each property determine how to group such values

to define one layer (ie one background)

At the end of the previous example (httpdabbletcomgistc1e399c986b3fbf9a223) there are

ltpgt with two different combination of a linear-gradient with an image and also a background

color The pseveral1 class is an all-in-one-line example The pseveral2 is also an illustration

of using background followed by a specific property (background-image) Below you will

find the corresponding CSS code and a screen shot

pseveral1

background 40 10 10rem 10rem space round fixed border-box

url(httpclassroomw3devcampuscomthemeimagephpessentialtheme14054

17959bgbody) 40 10 10rem 10rem space round fixed border-box linear-

gradient(to right rgba(255255255075) rgba(646464075)) border-

box yellow

pseveral2

background 40 10 10rem 10rem space round fixed border-box

40 10 10rem 10rem space round fixed border-box border-box yellow

background-image

url(httpclassroomw3devcampuscomthemeimagephpessentialtheme14054

17959bgbody) linear-gradient(to right rgba(255255255075)

rgba(646464075))