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
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Backgrounds

Last accessed pages

  1. Ajax-PHP File Manager (6697)
  2. AJAX Course, free Lessons (10654)
  3. PHP-MySQL Scripts (5233)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (104601)
  5. Website Mini-Traffic and Pages Access data (1984)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (360)
  2. Tabs effect with CSS (350)
  3. Contact page - CoursesWeb (349)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (132)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (80)