Using CSS background properties, you can set the background of the whole page or of a page element: DIV, paragraph, table, form, etc.

background-color

The background-color property is applied throughout the content area of the element and is drawn behind any background-image that is set.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>background-color</title>
 <style type="text/css"><!--
 #idd { background-color: #a7fea8; }
 --></style>
</head>
<body>
 <div id="idd">Web site: http://CoursesWeb.net</div>
</body>
</html>
  - Result:
Web site: http://CoursesWeb.net
The background color of a page is defined in the body selector (body {background-color:#e8e8fe;}).

background-image

The background-image property s used to specify a background image for an element.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>background-image</title>
 <style type="text/css"><!--
 #idd { background-image: url('image.jpg'); }
 --></style>
</head>
<body>
 <div id="idd">Free CSS course</div>
</body>
</html>
  - Result:
Free CSS course

background-repeat

The background-repeat sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>background-repeat</title>
 <style type="text/css"><!--
 #idd {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
 }
 --></style>
</head>
<body>
 <div id="idd">www.MarPlo.net</div>
</body>
</html>
  - Result:
www.MarPlo.net

background-attachment

The background-attachment defines how a background position is determined.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>background-attachment</title>
 <style type="text/css"><!--
 /* Fixed background image */
 #idd {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
 }
 --></style>
</head>
<body>
 <div id="idd">... Content ...</div>
</body>
</html>

background-position

The background-position property specifies the position of the background image given as a set of two values: horizontal and then vertical.
  - Values:   - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>background-position</title>
 <style type="text/css"><!--
 #idd {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center top;
 }
 --></style>
</head>
<body>
 <div id="idd">Free courses and tutorials.</div>
</body>
</html>
  - Result:
Free courses and tutorials.

Multiple values for background property

The background property allows to add individual background properties (background-color, background-image, background-repeat, background-attachment, background-position) in the same definition, separated by space.
  - Syntax:   Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>background-position</title>
 <style type="text/css"><!--
 #idd { background:#f8fbfe url('image.jpg') 50% no-repeat }
 --></style>
</head>
<body>
 <div id="idd">Have a good life.</div>
</body>
</html>
  - Result:
Have a good life.
- When individual properties are left out of the background property, they are set to their default values.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Backgrounds

Last accessed pages

  1. Qwop (20175)
  2. Triangles with CSS (1504)
  3. Writing PHP scripts (7646)
  4. Mahjong Gardens (3981)
  5. Get the value of the selected /checked checkboxes in a form (23824)

Popular pages this month

  1. Qwop (4181)
  2. Bubbles3 (3586)
  3. Butterfly Kyodai (2552)
  4. Zuma Deluxe (2352)
  5. Backgammon (1216)