Background Styling

background imageCSS Background styling is an essential part in web designing.Cause Css background properties provides a lot of facilities to design a inter active web site.

With the help of css background  properties you can choose  your desire color, image to use as background of web pages and also can setup horizontally or vertically repeated or no-repleted.

List of major CSS Backgrounds properties:

1.Background-attachment.

2.Background-position.

3.Background-color.

4.Background-image

5.Background-repeat or no-repeat.

1.Background-attachment:

Background-attachment indicates that whether the background fixed stay on the web page.

2.Background-position:

Background-position defines the right position of the background.

3.Background-color:

Background-color specifies that what color will you use for your web page background.

Background-color can be used by the following three ways:

1.By Color Name:For Example: background-color: green;

2.By Hex Number:For Example: background-color:#ffff;

3.By a color code/rgb code: For Example:background-color:#4236ed;

Example with body:

body{

       background-color: green;

}

4.Background-image:

Background-image indicates which image will you use as your web page background:

For Example:

body  {
background-image:url(myproject/images/image5.jpg)
}

Example with HTML code:

html>
<head>
<style>
body {
background-image:url(myproject/images/image5.jpg)
          }
</style>
</head>

<body>
<h1>Welcome to css tutorial</h1>
<p>You can see a new background image below this line of text.</p>
</body>

</html>

Output of the above code:

back

5.Background-repeat or no-repeat:

Background repeat or no-repeat indicates that whether background image will be be repeated or no-repeated in theoretically or horizontally.

For Example1:

body {
background-image:url(myproject/images/image5.jpg)

                           background-repeat: repeat-x or y;
}

For Example2:

body {
                           background-image:url(myproject/images/image5.jpg)

                           background-repeat:no- repeat;
}

Related Post or  you may fell interest: