Lecture 17: CSS Backgrounds
Overview:
- background-color Property
- background-image Property
- background-repeat Property
- background-position Property
- background-attachment Property
- background Shorthand Property
background-color Property
| Property | Usage and Effect | Values Accepted | Recommendations |
|---|---|---|---|
| background-color | Used to change the background color behind text and potentially behind an entire region of the page, if applied to a block-level tag. Applying this to 'body' changes the background color for the entire browser window. | A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent' (this is the default) | The exact same effect can be achieved more efficiently with the 'background' shorthand, so that is preferred. The shorthand also has better support in older browsers.
Always pair a background color with a text color, if that area of the layout is expected to contain text content. |
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Color</title>
<style type="text/css"><!--
body {background-color: #ccc; color: #000;}
p {background-color: #fff; color: #000;}
div {background-color: #000; color: #fff;}
--></style>
</head>
<body>
<p>Some sample text, showing a different background color</p>
<div>And additional sample text, again differing the background</div>
</body>
</html>
background-image Property
| Property | Usage and Effect | Values Accepted | Recommendations |
|---|---|---|---|
| background-image | Used to insert an image as a background for an element (or for the entire browser window, if applied to 'body'). | The filename of the image (and directory path, if not in the same directory as the file with the CSS in it) | Only make backgrounds of non-essential images, because CSS could be altered or disabled and then the image would not be there. Essential images should be coded into the document via <img />
Modern browsers support background images for a wide variety of tags, but legacy browsers (e.g., Netscape 4.x) only support this for <body>. If legacy browsers need to be supported, aim for a graceful degradation by hiding all non-<body> backgrounds from that browser. Background images have no effect on the height/width of the element they are applied to, so users will only see as much of the background image as the element's height and width allow. |
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Image</title>
<style type="text/css"><!--
body {background-image: url(smile.gif);}
--></style>
</head>
<body></body>
</html>
background-repeat Property
| Property | Usage and Effect | Values Accepted | Recommendations |
|---|---|---|---|
| background-repeat | Instructs a background image whether it should tile/repeat and, if so, in what direction (x-axis which is horizontal, or y-axis which is vertical). | repeat (the default) | no-repeat | repeat-x | repeat-y | For many background images you will want to instruct them to no-repeat, if nothing else, in order to prevent them from appearing multiple times should the element that they are applied to become larger. |
Sample code 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Repeat (no-repeat)</title>
<style type="text/css"><!--
body {background-image: url(smile.gif);
background-repeat: no-repeat;}
--></style>
</head>
<body></body>
</html>
Sample code 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Repeat (repeat-x)</title>
<style type="text/css"><!--
body {background-image: url(smile.gif);
background-repeat: repeat-x;}
--></style>
</head>
<body></body>
</html>
Sample code 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Repeat (repeat-y)</title>
<style type="text/css"><!--
body {background-image: url(smile.gif);
background-repeat: repeat-y;}
--></style>
</head>
<body></body>
</html>
background-position Property
| Property | Usage and Effect | Values Accepted | Recommendations |
|---|---|---|---|
| background-position | Used to place the background image within the specified element (or within the browser window, if applied to 'body'). |
Keyword Values: top/center/bottom | left/center/right (if you omit the second value, it defaults to 'center')
Percentage Values: x% | y% (Horizontal position, followed by vertical position. Top left is 0% 0%; bottom right is 100% 100%. If only one value is given, the other is set to 50%). Pixel / Other Values: x | y (Horizontal position, followed by vertical position. Top left is 0px 0px. If only one value is given, the other value is 50%. It is fine to mix percentages and pixels. |
Legacy browsers (e.g., Netscape 4.x) do not support this, so images appear in the top left (the default position).
If applying the background image to 'body' then in most cases you will need to set 'html' to a height of 100% for some browsers (e.g., Gecko-based browsers) to render the background in the correct place. |
Sample code 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Position (keywords)</title>
<style type="text/css"><!--
body {background-image: url(smile.gif);
background-repeat: no-repeat;
background-position: top right;}
--></style>
</head>
<body></body>
</html>
Sample code 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Position (percentages)</title>
<style type="text/css"><!--
html {height: 100%;} /* necessary for Gecko-based browsers */
body {background-image: url(smile.gif);
background-repeat: no-repeat;
background-position: 25% 75%;}
--></style>
</head>
<body></body>
</html>
Sample code 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Position (percentages)</title>
<style type="text/css"><!--
html {height: 100%;} /* necessary for Gecko-based browsers */
body {background-image: url(smile.gif);
background-repeat: no-repeat;
background-position: 100% 30%;}
--></style>
</head>
<body></body>
</html>
background-attachment Property
| Property | Usage and Effect | Values Accepted | Recommendations |
|---|---|---|---|
| background-attachment | Determines whether a background image scrolls with the document or remains stationary. | scroll (the default) | fixed | Legacy browsers (e.g., Netscape 4.x) do not support this, so images do not maintain the same location on the page as you scroll down (as you scroll the image goes out of view). This is not a major concern, as it does not create any difficulties in reading the page. |
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background-Attachment</title>
<style type="text/css"><!--
body {background-image: url(smile.gif);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;}
--></style>
</head>
<body>
<p>Sample text to give page some height</p><p> </p><p> </p>
<p>Sample text to give page some height</p><p> </p><p> </p>
<p>Sample text to give page some height</p><p> </p><p> </p>
<p>Sample text to give page some height</p><p> </p><p> </p>
<p>Sample text to give page some height</p><p> </p><p> </p>
<p>Sample text to give page some height</p><p> </p><p> </p>
<p>Sample text to give page some height</p><p> </p><p> </p>
</body>
</html>
background Shorthand Property
| Property | Usage and Effect | Values Accepted | Recommendations |
|---|---|---|---|
| background | Combines the other background-related properties into one sequence. | Sequence of Values: background-color background-image background-repeat background-attachment background-position
Not all values need to be supplied; values omitted revert to defaults. The order of appearance must follow the sequence given previously. The values are separated by a single space. |
Highly recommended and should be used instead of 'background-color'; makes code more efficient and also sets all properties not listed to their defaults. This eliminates concerns about user settings or browser settings that might negatively impact rendering.
Pair a background color with a text color in cases where there is no higher-level text color being inherited and text content will be involved. |
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded CSS: Background Shorthand</title>
<style type="text/css"><!--
html {height: 100%;} /* necessary for Gecko-based browsers */
body {background: #eee url(smile.gif) no-repeat center; color: #000;}
--></style>
</head>
<body></body>
</html>