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:
selector { background-color: value; }
Example:
<style>
#idd { background-color: #a2fda3; }
</style>

<h4>Example background-color</h4>
<div id='idd'>Web site: https://CoursesWeb.net</div>

The background color for the whole page can be 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:
selector { background-image:url('URL'); }
Example:
<style>
#idd { background-image: url('css/green_bg.jpg'); }
</style>

<h4>Example background-image</h4>
<div id='idd'>Free CSS course</div>

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:
selector { background-repeat: value; }
Example:
<style>
#idd {
 background-image: url('css/green_bg.jpg');
 background-repeat: no-repeat;
}
</style>

<h4>Example background-repeat</h4>
<div id='idd'>marplo.net</div>

background-attachment

The background-attachment defines how a background position is determined.
- Values: - Syntax:
selector { background-attachment: value; }
Example:
<style>
/* Fixed background image */
#idd {
 background-image: url('../imgs/smile_gift.png');
 background-repeat: no-repeat;
 background-attachment: fixed;
 border:1px solid blue;
 height:200px;
}
</style>

<h4>Example background-attachment</h4>
<div id='idd'>In the world of illusions.</div>

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:
selector { background-position: value; }
Example:
<style>
#idd {
 background-image: url('../imgs/smile_gift.png');
 background-repeat: no-repeat;
 background-position: center top;
 border:1px solid blue;
 height:250px;
}
</style>

<h4>Example background-position</h4>
<div id='idd'>Anything seems important.</div>

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:
selector { background: bg_color bg_image bg_repet bg_attach bg_position; }
Example:
<style>
#idd {
background:#f8fbfe url('../imgs/smile_gift.png') 50% no-repeat;
border:1px solid blue;
height:250px;
}
</style>

<h4>Example background property with multiple values</h4>
<div id='idd'>But nothing matters.<br>
Have a good life.</div>
- 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. Horizontal-Vertical Menu with Arrow Keys Navigation (1833)
  2. Ajax-PHP Rating Stars Script (14122)
  3. PHP getElementById and getElementsByTagName (32878)
  4. Convert XML to JSON in PHP (9209)
  5. Script Users Register, Login, Online (17008)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1440)
  2. Contact page - CoursesWeb (1403)
  3. Tabs effect with CSS (1398)
  4. PHP getElementById and getElementsByTagName (660)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (537)