How to apply CSS background styles in HTML

To make your web page look better than before apply the following CSS properties to sytle your code:

  • background-color
  • background-image
  • background-repeat
  • background-position

BACKGROUND COLOR

The background-color property specifies the background color to your page.

EXAMPLE:

body{background-color:blue;}

BACKGROUND IMAGE

The background-image property is used to set the background image to your page.

By default, the image is repeated so it covers the entire web page.

EXAMPLE:

body {background-image:url('Rose.gif');}

BACKGROUND REPEAT

You can repeat the image to your entire web page by using background repeat property.

By default, the background-image property repeats an image both horizontally and vertically.

EXAMPLE:

body
 {
 background-image:url('Rose.gif');
 background-repeat:repeat-x;
 }

BACKGROUND POSITION

You can also set the image position by using background position property.If you dont want to repeat the image use ‘no repeat’ property.

EXAMPLE:

body
 {

 background-image:url('Rose.gif');
 background-repeat:no-repeat;
 background-position:right top;
 }

BACKGROUND: SHORTHAND PROPERTY

It is also possible to specify all the properties in one single property. This is called a shorthand property.

EXAMPLE:


<html>
<head>
<style type="text/css">
body
{
background:#fffff0 url('Rose.gif') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>WELCOME TO</h1>
<p>LEARN WEB DEVELOPMENT</p>
</body>
</html>

NOTE: Specify your image location properly to view the image



Posted in CSS Tagged with: