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: https://CoursesWeb.net</div>
</body>
</html>
  - Result:
Web site: https://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">marplo.net</div>
</body>
</html>
  - Result:
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 HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Backgrounds

Last accessed pages

  1. PHP MySQL - using MySQLi (8250)
  2. Get Duration of Audio /Video file before Upload (5808)
  3. Insert, Select and Update NULL value in MySQL (26455)
  4. Ajax-PHP Rating Stars Script (12967)
  5. Read Excel file data in PHP - PhpExcelReader (56584)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (321)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (265)
  3. Register and show online users and visitors (253)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)