[thelist] Positioning a DIV relative to the left edge of a background image?

Christian Kavanagh christiankavanagh at gmail.com
Mon Jul 31 09:12:34 CDT 2006


Hello thelist.  I'm have some problems trying to implement this web  
design:

http://www.polarissc.com/star_surface.jpg

In my code, the image of the solar surface has been implemented as a  
background image, like so:

<style type="text/css">
body
{
	background-image:
url('star_surface.jpg');
	background-repeat:
no-repeat;
	background-position:
top;
	background-color: #020202;
}
</style>

Now it's time for me to position the "Great business leaders..."  
div.  I specifically want it 162px from the left edge of the  
background image, and 334px from the top edge of the background  
image.  Here is the challenge – I want to position the DIV based on  
the background image, not the browser window edge.

If a user is viewing 800x600, the div should be close to the left and  
bottom edges of his browser (since his display cuts out the edges of  
the background image).  1024x768, it should be hundreds of pixels  
away (since his display allows him to see all of the background image).

I can't make the "Great business leaders" part of the background  
image, since I need it to be clickable.  It's the entrance button for  
the site.

My workaround has been to overlay a transparent GIF, 100% wide - so  
basically the whole page is clickable - but this is a bit clunky and  
I wonder if there's a better way.

Thanks in advance,
Chris.


More information about the thelist mailing list