SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thank you SO much. That worked perfectly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •