Main Wrapper

[oxicottin]

Hello, I want to use an image inside my main wrapper. I have this code in my stylesheet:

#mainWrapper {
	background-image: url(../images/burn_paper.gif);
	text-align: left;                                                         
	width: 90%;                                                                          vertical-align: top;  
	border: 1px solid #9a9a9a;

It repeats the image which I dont want... I tried using this code:

#mainWrapper {
	background-image: url(../images/burn_paper.gif);
	background-repeat:no-repeat;
	text-align: left;                                                         
	width: 90%;                                 
	vertical-align: top;  
	border: 1px solid #9a9a9a;

But it just make my image in one corner. My image is 600x800px. What do I need to do to get it to cover the whole main wrapper? I dont want it as the body background image.. Thanks!

[gjh42]

CSS doesn't stretch an image to fill a cell the way (I think) tables do. The image is what it is. If you want it to fill a div, it needs to be big enough for whatever size the div could be, or else repeat in one or both directions.

An alternative for images that fade at one edge is to give the div a background-color to match that edge, so there is no visible break.

[oxicottin]

CSS doesn't stretch an image to fill a cell the way (I think) tables do. The image is what it is. If you want it to fill a div, it needs to be big enough for whatever size the div could be, or else repeat in one or both directions.

An alternative for images that fade at one edge is to give the div a background-color to match that edge, so there is no visible break.

TRhe problem with it fading to the next it its a burnt piece of paper with dark edges. Any other sugestions? Could I break the image up and add pieces in each box? Thanks!

[gjh42]

Can you post a link to the site? It's hard to know exactly what you want or what obstacles there are without seeing it.

If the image is the size you want but off center, that is easy to fix. Add

background-position: top center; (or center center;)

to #mainWrapper.

Cutting it up won't help anything. If other divs are obscuring parts of it, give them

background-color: transparent;