[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