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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Backgrounds

Last accessed pages

  1. Master Of The Secret Sea (377)
  2. Volume and Surface Area Calculator for 3D objects (6309)
  3. PHP MySQL - using MySQLi (7674)
  4. Zoo Amigos (6424)
  5. Dolphin Olympics 2 (1033)

Popular pages this month

  1. Qwop (7149)
  2. Drag Racer V3 (4902)
  3. Bubbles3 (1994)
  4. List with All the Games (1669)
  5. Butterfly Kyodai (1590)