I just need to put the 1 image on the top and the second image would be on the bottom part of the background is that possible? please help me on this many thanks
html { background:url(../images/try.jpg) repeat-y top center; width:100%; height:100%;}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:url(../images/try2.jpg) no-repeat bottom center;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
height:100%;
}
CSS3 allows for it, but to make it cross-browser compatible I'd recommend just using a container div and assigning the second background to that.
HTML:
<body>
<div id="container"></div>
</body>
CSS:
body {
background-image: url(try.jpg) repeat-y top center;
}
#container {
background-image: url(try2.jpg) no-repeat bottom center;
}
CSS 3 ....
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: url(../images/try2.jpg) no-repeat bottom center,
url(../images/try2.jpg) no-repeat bottom center;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
height:100%;
}
But to make it cross browser, above is the the solution by treefrog ;)