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 a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Backgrounds

Last accessed pages

  1. Add, Change, and Remove Attributes with jQuery (23070)
  2. Mahjong Games (7595)
  3. PHP getElementById and getElementsByTagName (11832)
  4. Number Lines (1729)
  5. $_GET, $_POST and $_REQUEST Variables (20557)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47880)
  2. Read Excel file data in PHP - PhpExcelReader (35991)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35605)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32103)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29375)