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 meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

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