How do i have the text overlay onto a new background image?

I am making my first CSS layout for my website and what i have so far is located here: http://www.libertygone.net/new/ and the css is here: http://www.libertygone.net/new/css.css/

I am adding text to the layout but when i add the text to the "content" section there is a small gap at the end of the div tag that repeats the background.. but what i want to do is have the continued text overlay onto this ( http://www.libertygone.net/new/images/continue.jpg ) so if the text goes down the page a bit, the layout looks smooth and continued with the text...

i have tried no-repeat on the background of the content div but that doesn't help...

sorry this sounds confusing but i hope someone out there knows what i am trying to ask/explain. any help guys?!



thanks

 

i take it this has been fixed (looking at your site now and the only odd thing i see is the grey strip towards the bottom)

 

no.. i added more text to further example what i am talking about.

i want http://www.libertygone.net/new/images/continue.jpg to continue as the background of the text so that http://www.libertygone.net/new/images/body.jpg is not repeated

and how come there is a gap between the body and the footer

 

ok then i see it now - sorry about that

why are you using body.jpg in the first place - you could just use continue.jpg as the entire background

#content {
background: url("images/continue.jpg");
background-repeat: repeat-y;
padding-top: 10px;
padding-left: 110px;
padding-right: 110px;
text-align: left;
color: #fff;
font-size: 10px;
}

and for your footer problem...add this to the top of your css file

* {
margin:0px;
padding:0px;
}

 

sorry again...i just noticed again that you have a slight gradient in the body.jpg file

not sure how you are going to do what you want - css3 will allow multiple backgrounds i think in one div but thats not around yet.

ill have a think about it for the easiest way - someone else might be able to help though

 

thanks for your help united,

but does anyone else have any ideas?

 

Change the CSS to:

#content {
	background: url("images/continue.jpg");
	}
	
#contentin {
	background: url("images/body.jpg");
	background-repeat: no-repeat;
	padding-top: 10px;
	padding-left: 110px;
	padding-right: 110px;
	text-align: left;
	color: #fff;
	font-size: 10px;
}

Code (markup):

Edit the HTML and add a new div inside the existing content div e.g.

<div id="content"><div id="contentin">
your text here.
</div></div>

Code (markup):

That should now show the body.gif only once with continue.jpg repeated below it.

 

thanks to both of you!!! got just what i wanted!!!!

rep added for both of you.