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 defines the clickable areas inside the image map?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Which CSS property defines what is done if the content in a box is too big for its defined space?

display overflow position

#id {
  overflow: auto;
}

Click on the event which is triggered when the mouse is positioned over an object.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

Indicate the PHP variable that contains data added in URL address after the "?" character.

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

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