Question

I have a background image that re sizes with the window. I want the words on my background image to represent links. My idea was to create divs that were empty and transparent and position them over the words in the background image and when that div was clicked, the corresponding link would be activated.

I am having trouble positioning my divs. I can’t seem to get them to stay aligned with their word in the background image when the window is re resized.

HTML:

<div id="wrapper">

    <div id="bespoke">
        I want this to always be aligned with "Bespoke" in the background image
    </div>

</div>

CSS:

html { 
    background: url(main.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
}

#wrapper {
    position: relative;
    top: auto;
    margin: auto;
    text-align: center;
    height: auto;
}

#bespoke {

}

Demo:

http://jsfiddle.net/DzC3V/1/

Note: if jQuery is the best way to accomplish this, I don’t mind using it.

Answer 1

In my opinion you won’t need jquery. CSS and positioning with percentages should do the trick.
Try the following

#yourObeject {
     position: absolute;
     top: 30%;
     left: 30%;
}

it’s tricky to position your div properly. but it should work

if this doesn’t fit your needs you should really try doing an image Map and resize it with jquery