CSS Background Size

I want to maintain a responsive design but am not sure what I am doing wrong.  I have a background image that changes when you hover in certain spots.  I want the background image to shrink when I adjust the browser window size.  But by setting a min-height does not work, cause it throws off the other hover divs that depend upon the size of the background image:  You can see what I mean here when you adjust the size of your browser window and then hover.
http://www.energyreco.com/mapping/
LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dean OBrienCommented:
I recommend adding the IMG in the main body of the code, rather than as a background, then set the width to 100%. That way as the page size is adjusted, the parent DIV to the img will also change size. As you have it currently set, the height is permanently 900px. Therefore when you absolutely position the hover divs, they are always at the same height in the page.

Also, i would consider only having the extra detail revealed as a small image, positioned over the main image. As it currently is, it takes a lot of resource overlaying the full image each time. When i tested the page, it was very jump when the hover effect was happening.
0
Dean OBrienCommented:
rgranlund,

To try and illustrate what i was talking aBOUT, i HAVE CREATED AN EXAMPLE AT THE LINK BELOW:
http://www.suremedia.co.uk/ee-examples/positioning-elements-on-responsive-image.htm

You will see the black square is part of the background image, where as the green square has been absolutely positioned above it. If you make the screen smaller, you will see both squares keep exactly the same proportions. Also, if you hover over the green square it changes colour.

Regards
Easynow
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rgranlundAuthor Commented:
If you use a developer tool like Firefox to see the actual link area, it makes it hard to create a smaller image to overlay.  However, it is a good idea and I will give it a try.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.