Body tag styles by using external style sheet in a html page

How to add background image to HTML page body elements and tables with repeat and size

We can use body tag to define style of our page by using different styles like background color , background image with fixed and repeat styles. This style saves our effort and code and we can manage easily the style of our website by editing the external cascade style sheet.

We will discuss various style properties and how they are to be used in external style sheet file.

Let us start with top margin of the page.

body {  margin-top: 0.0em;}

Now the page will be flushed with the top bar of the browser window as we have given top margin as 0

Demo page with top margin style

Background color of the page

We can specify the background color of the page and this color will be used throughout the page. So the unused space at left and right bottom of the page will be filled with background color specified in style sheet.

body {  background-color: #cfcfcf; margin-top: 0.0em;}

You can see this page how it adds color to its background

Using background image.

We can use any background image for the page by using style sheet for the body tag. We need to tell before that we are going to use image by saying url.

body { background-color: #cfcfcf; margin-top: 0.0em;
background-image:url(plus_logo.jpg);}

Demo page with background style

As you have seen in above demo page the background image is repeated many times. If we want to display the background image once only then we can add this code for not repeating the image at background

body {background-color:#cfcfcf; margin-top: 3.0em;
background-image:url(plus_logo.jpg);
background-repeat: no-repeat;}

Demo page with background style

As we have seen above the background image is positioned at left top location of the page. We can position it based on our requirement. This line of code will position it at left side centre of the page

body {  background-color: #cfcfcf; margin-top: 3.0em;
 background-image:url(plus_logo.jpg); 
background-repeat: no-repeat;
background-position: left center;
}

Demo page with background image at a location

So we can place the background image at different places by using style of body tag. You have seen how to use no-repeat and display the iamge once only, now we will try not to fix the background image in all the direction and allow it to repeat in either x ( horizontal ) or y ( vertical ) direction. Here is the code

body {  background-color: #cfcfcf; margin-top: 0.0em;
 background-image:url(plus_logo.jpg);
background-repeat: no-repeat;
background-position: left center;
background-repeat: repeat-x;

Repeat of background image at a direction

Fixing background image without scrolling along with the page

In the above example you can easily change the direction to vertical by changing the code to repeat-y . Now we will learn how to fix the background image in one location. Here as we scroll up or down the background image will be fixed at the centre. There will be no scrolling of the image. This technique is used for watermarked logo you want to be fixed through out the page at the background. Let us try this code here.

body {  background-color: #cfcfcf; margin-top: 0.0em;
 background-image:url(plus_logo.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;}

Demo of Fix the background image style

Table Background image Borders with CSS Header with CSS

HTML

vijay	26-08-2014
thank you so much sir.... nice explanation

Body tag style by using CSS in a webpage

Background color of the page

Using background image.

Fixing background image without scrolling along with the page

Subscribe