Two Background Images

creepycridler · #1 (**permalink**) 01-28-10, 10:04 PM

Hello,

I am trying to stack images in the background of my site. I have one image that I would like to repeat-x for one row the start another image and do the same but continue on until there is no space left on screen. Does that make sense?

Here is what I have but it is not working.

HTML Code:

body {
	margin: 0px;
	padding: 0px;
	background-image:url('../images/default_body_bg.gif');
	background-repeat:repeat-x;
	background-image:url('../images/default_body_bg.gif');
	
}

Thanks in advance!

creepycridler · #2 (**permalink**) 01-28-10, 10:29 PM

I also tried this thinking that the image I want on the bottom would repeat the whole screen and the top would overlay once and leave the background visible....

HTML Code:

html {
	background-image:url('../images/body_bg.gif');
}


body {
	margin: 0px;
	padding: 0px;
	background-image:url('../images/default_body_bg.gif') repeat-x;
}

wirehopper · #3 (**permalink**) 01-28-10, 11:12 PM

HTML Code:

...
<style type="text/css">
body
{
margin:0;
padding:0;
}
#top
{
width:100%;
height:250px; /* Height of image */
background:transparent url(../image/bg.gif) repeat-x;
}
#next
{
width:100%;
height:500px;
background:transparent url(../image/bg2.gif);
}
</style>
<body>
<div id="top">
Top content
</div>
<div id="next">
Next content
</div>
...

Not tested.

Visit W3Schools Online Web Tutorials for help