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 tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Backgrounds

Last accessed pages

  1. PHP getElementById and getElementsByTagName (25325)
  2. Get and Modify content of an Iframe (16092)
  3. Fotorama Image Gallery (3411)
  4. Contact page - CoursesWeb (8484)
  5. Tabs effect with CSS (9196)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2414)
  2. Contact page - CoursesWeb (2333)
  3. Tabs effect with CSS (2324)
  4. Insert, Select and Update NULL value in MySQL (1314)
  5. PHP getElementById and getElementsByTagName (904)