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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Backgrounds

Last accessed pages

  1. Bubbles3 (34858)
  2. Math Lines (1927)
  3. innerHTML and outerHTML to Get and Replace HTML content (12047)
  4. Volume and Surface Area Calculator for 3D objects (6060)
  5. Mystic India Pop (6574)

Popular pages this month

  1. Bubbles3 (3136)
  2. Butterfly Kyodai (2748)
  3. Zuma Deluxe (2025)
  4. Qwop (1252)
  5. Backgammon (1197)