Need help repeating multiple images...

...Hi Guys, I've just joined here because I have a problem thats really annoying me, so I hope someone can offer me a solution.

I've only started into using css, but for my home page, I want to have a tiled background, and a banner on top.

The background is working fine, I use the following code:

body {
	background-image: url('tile5.gif');
	background-repeat: repeat;
	}

Code (markup):

and the gif is repeated on the x and y axis of the page, which is great! However, I want another image, border.gif, repeating on the x axis across the top of the page.

How can I do this? I'd prefer to do it in CSS but I'd accept a solution in JavaScript if there isnt a way to do it in CSS...

Thanks for any help you have to offer

 

First, I'd suggest getting in the habit of condensing properties to save code.

background:url('tile.gif'); /* repeat is the default behavior */

the property you are looking for though is repeat-x, and since you want it at the top, you'll need to state that.

background:url('tile5.gif) top center repeat-x;

Thanks to IE you need to specify both x and y positioning. I use center on the x axis if the tile has a pattern so the pattern lines up to centered content consistantly on all browsers - which usually lets me dodge the bullet of trying to futz with alpha .png's.

 

no, i want tile5 repeating across x and y, which is what i currently have.

on top of that, i want another image, repeating on the x axis. so ill have 2 images, 1 repeating on x and y, and another repeating on only x.

if i ahve 2 background images like

body {
	background-image: url('tile5.gif');
	background-repeat: repeat;
        background-image: url('banner.gif');
	background-repeat: repeat-x;
	}

Code (markup):

only teh second one shows up...

 

Ok, the extra code shows what you meant - from the initial post It sounded more like you didn't know about repeat-y.

OF COURSE only the second one shows up, by declaring the second one you are OVERRIDING the first one just like any other CSS elements. CSS overloads, not stacks. If I put padding:5px; padding:5px; on the same element I only get 5px, not 10. Same thing.

You can only assign one background per element in CSS2 - multiple backgrounds is theoretically in the CSS3 spec, but since we'll likely not be able to deploy that for at least five years, more likely the DECADE it took for CSS2 to reach widespread deployable - you can't use that.

If you want a second background, you'll have to assign it to a containing DIV.

 

okay, so I used a div (topBorder) and here's my code which now works:

body {
	background-image: url('carbon_fibre5.gif');
	background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-bottom:36px;	
}
#topBorder{
	background-image: url('transpblack2.png');
	background-repeat: repeat-x;
	height:120px;
}

Code (markup):

NOW what i need is a bottom border, using a different image again, say bottomborder.gif.
SO far, I've used another div, bottomBorder, and used the following code:

#bottomBorder{
	background-image: url('bottomborder.gif');
	background-repeat: repeat-x;
	height: 36px;
}

Code (markup):

but i need to align to the bottom of the page, so its always at the very bottom. how do i go about aligning it to the bottom of the page?

 

It's kind of hard to picture without a URL to view, but instead of having a body with a background image, have you thought about just thinking of it in terms of a header and footer DIVS? You can have background images in these DIVs and just position these accordingly.
And just thinking about it, have you tried just using the border declaration for your body tag?
There's probably easier ways to do what you want without mutiple DIVs and positioned backgrounds, but without seeing what you want to do it's hard to tell.
But to answer your question about the div on bottom I think you can put a



#bottomBorder{
position: absolute;
bottom: 0;
background-image: url('bottomborder.gif');
background-repeat: repeat-x;
height: 36px;
}

That might to it. But, if you have enough content between top and bottom you should be alright.

 

The way I'd approach that a 100% min-height model... I think. Still not enough code to actually DO anything with though as any of these layout techniques need to take the actual page layout into account.

 

I've heard min-height doesn't work in Explorer, what's the workaround?