Css Course


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 attribute is used in <img> tag for the address of the image?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which CSS code hides the element on page?
display: none; display: inline; position: relative;
#id {
  display: none;
}
What instruction stops the execution of a while() or for() statement?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicate the function that can create a constant.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Backgrounds

Last accessed pages

  1. Display data from PHP Array, or MySQL in HTML table (26466)
  2. How to use php variable in external js file (3589)
  3. The Fifth Agreement (18477)
  4. SHA1 Encrypt data in JavaScript (34634)
  5. SBMD - Simple Backup MySQL Database (4937)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (443)
  2. SHA1 Encrypt data in JavaScript (236)
  3. Read Excel file data in PHP - PhpExcelReader (217)
  4. PHP Unzipper - Extract Zip, Rar Archives (217)
  5. Get and Modify content of an Iframe (139)