Content positioned over background image

Question

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!

Answer 1

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.

Answer 2

I would suggest having the entire UI placed into one whole image then applying your text on top of that is probably going to cause you the most grief.

I would recommend you take the animal as the sole element of the background image, then you could add other HTML elements over the top of that (such as the logo) and then the four boxes could be added again below everything else.

This way you can ensure the main graphic (ie the logo and "coming soon" text) are positioned in the centre using CSS, you could size the boxes specifically to fixed proportions using CSS and these would scale more effectively depending on the browser resolution.