How to Styling-Background Using CSS in HTML

100

Article

Step 1

We can use the Background Color property with Color Name or HEX-Value as shown below:

body{ background-color:Black;}

body{ background-color:#000;}

Step 2

We can set various background colors for paragraph, heading and division using the code shown below:

CSS code as shown below:

h1 {background-color:#888822;}

p {background-color:#E0FF00;}

div {background-color:#888888;}

HTML code as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

Here's the Result as displayed by the Browser:

Step 3

We can set an image also in the background as shown below:

CSS code as shown below:

body {background: url('socials.png') 0 0 ;}

Note: By default, the background repeats an image for the entire page if we use the above code, whether the repeat word is written or not in the syntax.

Here's the result:

We can set the repetition of image and position of image using the code shown below.

For no-repetition of the image:

body {background: url('socials.png') 00 no-repeat ; }

For repetition of an image:

body {background: url('socials.png') 00 repeat; }

For repeat horizontally:

body {background: url('socials.png') 00 repeat-x; }

For repeat vertically:

body {background: url('socials.png') 00 repeat-y; }

For position of image:

body {background: url('socials.png') 00 no-repeat;background-position: top right ; }

Step 4

Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for the background is as shown above ie; body {background:#ffffff url('socials.png') no-repeat right top;}