CSS Background

CSS/CSS Background

CSS Background properties are used to define the background effect of an element. CSS properties used for background effects:

• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position

Background-color

The background-color property specifies the background color of the element. By default, most browser windows have a white color background, but users can set a background color for their windows. The background color of the page is defined in the body of the selector.

Example

<style type="text/css">

        body{

            background-color: rgb(100, 100, 50);

            }

        p{

            /* Color name*/

            background-color:red;

           }

           h1{

            /* RGB values*/

            background-color:rgb(100, 200, 100);

           }

           h2 {

            /* HEX Code*/

            background-color:#adbb;

           }

           </style>

            <p> This background-color value by color name</p>

            <h1>This background-color value by RGB values </h1>

            <h2>This background-color value  by HEX Code </h2>

Result:

Background-image:   

The background-image property specifies an image to use as the background of the element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this:

 body{

            background-image: url("image.png");

            }

By default, background-image repeat an image both horizontally and vertically, some images should be repeated only horizontally or vertically.

Set position and no repeat When using a background image, use an image that does not disturb the text. showing the image only once is specified by the background-repeat property

Example:

body{

            background-image: url("images.jpg");

            background-repeat: no-repeat;

            }

To shorten the code, it is also possible to specify all the properties in one single property is called the shorthand property. Shorthand property for the background is simply "background"

CSS background property

background: Sets all the background properties in one declaration.

Example

 body{

           background: red url("images.jpg") no-repeat left top fixed;

            }

background-color: Set the background color of an element.

Example 

body{

            background-color: red;

            }

background-image: Set the background image of an element.

Example 

body{

            background-image: url(images.jpg);

            }

background-attachment: Set where the background image is fixed or scrolls with the rest of the page.

Example

body{

           background-image: url("images.jpg");

            background-repeat: no-repeat;

            background-position: left top;

            background-attachment: fixed

            }

background-repeat: Set the background image will be repeated.

Example

        body{

           background-image: url("images.jpg");

            background-repeat: no-repeat;

            }

background-position: Set the starting position of a background image.

Example

body{

           background-image: url("images.jpg");

            background-repeat: no-repeat;

            background-position: left top;

            }