I'm trying to position content based on certain elements of a background image. I've done a lot of research and it seems that it may be possible via JavaScript, but i'm not very familiar with the capabilities of JavaScript.
Here's the background image i'm using: http://dl.dropbox.com/u/4650892/bg2.jpg
I'm trying to ensure that information stays within the 4 boxes on that image. At the moment i've utilized the following CSS to ensure the background image stays perfectly sized within the browser:
background-image: url('../images/bg2.jpg'); <br />
background-repeat:no-repeat; <br />
background-position:center center; <br />
background-attachment:fixed; <br />
-o-background-size: 100% 100%, auto; <br />
-moz-background-size: 100% 100%, auto; <br />
-webkit-background-size: 100% 100%, auto; <br />
background-size: 100% 100%, auto;
This code may not be essential to what i'm trying to achieve, i'm not entirely sure.
It's easy enough to position the content when it remains in one resolution, but as soon as the browser is resized the content moves incoherently with the image.
Any assistance will be greatly appreciated!
Can't you make the Buffalo image and the other elements in that image separate? Or does all of that have to be part of the background image?
If it was me I would make only the buffalo picture be a background image. I would create the other elements in HTML. You can change their size if you have to based on media queries.