the color property -...
TRANSCRIPT
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
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
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
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))
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
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
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
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))
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
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
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
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))
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
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
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
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))
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
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
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
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))
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
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
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
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))
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
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
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))
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
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
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))
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
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))
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
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))
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))
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))
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))
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))