How to absolutely position a background image AND keep it mobile responsive friendly

HTML & CSS
1

URL: http://goo.gl/fj3veY

When viewing this header on a full size screen, the butterflies are in the exact position they need to be in. The small butterfly on the left is about 10px to the right of the marker tip. I would love to find a way to keep that butterfly 10px from the marker tip no matter what size the screen. The butterflies on the right can go off the page and out of the viewing area as long as the left butterfly stays put.

Do you think it’s possible? If so, can you point me in the right direction? Thanks!

2

HI,

If you make your butterfly image wider (approx 1340px) with the transparent space to the left of the butterflies then you should be able to position it at background-position 50% 0 on the site-header div. That will keep the position central as you resize the page and should stay in sync with the marker.

3

Hi Paul,

Thank you SO much. That worked perfectly. :slight_smile: