Seeking a solution to have words on my background image function as links, I planned to place transparent divs over the words in the background. However, struggling with positioning these divs accurately as the window is resized.
Code Snippet:
<div id="wrapper">
<div id="bespoke">
Desired alignment with "Bespoke" on background image
</div>
</div>
CSS styling:
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 {
}
View Demo here.
Note: Open to utilizing jQuery for optimal implementation if necessary.