hi

I'm very new to CSS, I've searched but haven't found a solution and would welcome your ideas
Currently I've got a page with a background image which is 800x600 positioned center center. That all looks good.
I want to display some text/a url beneath and in line with the bottom right corner of the image.

i.e. imagining this is an image below (text mockup)

........................................|
........................................|
........................................|
........................................|
........................................|
........................................|
_________________________|

>>>>>>>>>>Text & URL here


a) How can I set that text/url to position in relation to the image (which moves depending on the size of the browser)?
b) Can that image stay as background and if not how do I make it foreground?

Thank you

put them in a container and align the text right

<div>
<div>with BG image</div>
<div style="text-align:right;">Text goes here<div>
</div>

But, if you want the text at the bottom right corner, then you'll have to set the div with the bg image to position: relative, then use the bottom and right properties to position the div with the text in it.

hi
I'd prefer to make everything centered so that it looks symmetrical on any screen size and have been trailing these suggestions. Is there a way to make the text exactly relative to the image? ie. if the image is centered on the page, can the text be relative from center, or is relative only for from top/bottom/left/right etc?
thanks

use text-align:center; instead

Originally Posted by chrishirst

use text-align:center; instead

I appreciate the suggestion but how can one align the text completely relative to the image? It makes them both centered but I need the text over to the right (off centre).

Thanks in advance

CSS:

#image{
	position:relative;
	display: block;
	margin: 0 auto;
	height:600px;
	width:800px;
	background:transparent url(../images/some_image.jpg) no-repeat 0 0;
}
#image_text{
	margin: 0 auto;
	height:20px;
	width:800px;
	text-align: right;
}

HTML:

<div id="image"> </div>
<div id="image_text">Some text</div>

Originally Posted by Sooperb

I appreciate the suggestion but how can one align the text completely relative to the image? It makes them both centered but I need the text over to the right (off centre).

Thanks in advance

Which is what you will get using the code in post#2
centre the PARENT container and the image AND TEXT stay in position relative to each other!

Then you aparrently change the parameters

I appreciate your patience and suggestion(s), the code in post #7 (thank you) or #2 (thank you) lays it out well except it's at the top of the page, and I need the whole lot vertically aligned in the center/middle height of the page.

Thanks

http://www.webmaster-talk.com/css-fo...r-website.html

finally nailed it, many thanks for your help.

well thats nice tutorials buddy.

Usually the text will be placed over the background image, try this guide: http://www.the-art-of-web.com/css/textoverimage/