Friday, 31 August 2012

How to set 2 two background image using css style class in body tag elements html

HTML CSS Tricks 1: ( To apply background image for whole page )

We could set two background images using html and body tag elements in CSS styles class.
The below sample code snippet used to set the background image (tile.jpg) / color for the whole page (html css) and bc_head.png image has to be displayed just above the background tile image / color.
 
html {
                    background: #000 url("images/tile.jpg")  repeat;
                }                            
body {
                    background: url("images/bc_head.png")  repeat-x;
                    background-position: left top;
               

HTML CSS Tricks 2:( To apply background image for not whole page and only for body  )


To apply background image for not whole page and only for body, Consider the following code.
We can create table / div elements inside body tag and write css style class names.

HTML Source:

<body>
<table> <tr>
<td class="a"><div class="b">...</div></td>
</tr></table>
 </body>

CSS style Class name:

.a
{
  background-image: url(a.png);
}
.b
{
  background-image: url(b.png);
}

No comments:

Post a Comment