knowledgediarybd.com

Your Virtual Programming Campus

Background Styling of webpage using CSS.

Background Styling of webpage using CSS.

background image

Background Styling of webpage using CSS. 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.

Background Styling of webpage using CSS.

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;

Background Styling of webpage using CSS. 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>

Background Styling of webpage using CSS.

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

 Background Styling of webpage using CSS.

Related Post or  you may fell interest:

The Author

Toufiq Hassan

I am Toufiq Hassan Shawon, MBBS doctor passed from Rajshahi Medical College. Follow me on Google+
knowledgediarybd.com © 2015 Best Cloud Hosting Provider in Bangladesh