Backgrounds

Css Course

• background-image
• background-repeat
• background-attachment
• background-position
• Multiple values for background property

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.

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

<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

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

<style>
#idd { background-image: url('css/green_bg.jpg'); }
</style>

<h4>Example background-image</h4>
<div id='idd'>Free CSS course</div>

background-repeat

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

<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

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

<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

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

<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

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