Backgrounds

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:

color - The color of the background ( color-rgb (like rgb(2,3,255)), color-hex (like #abcdef), color-name (like blue)).
transparent - No color fill for the background (default).

- 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:

url('URL') - The URL to the image.
If you use a relative path, is calculated based on the location of the file containing the given style rule and not the source HTML document (unless they are one and the same).
none - No background image will be displayed (default).

' - 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:

repeat - The image will be repeated both vertically and horizontally.
repeat-x - The image will be repeated only horizontally
repeat-y - The image will be repeated only vertically
no-repeat - The background image does not repeat.

- 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:

scroll - The background scrolls with the rest of the page (default).
fixed - The background image is fixed

- 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:

x% y% - The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0% (default). The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos - position in relation to the top-left corner (px, em). The first value is the horizontal position and the second value is the vertical.
specifics - (left top), (left center), (left bottom), (right top), (right center), (right bottom), (center top), (center center), (center bottom).
If you only specify one keyword, the second value will be 'center'.

- 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.

<<-Configuring Text -- CSS Box Model->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Backgrounds

Css Course

background-color

background-image

background-repeat

background-attachment

background-position

Multiple values for background property

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month