SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    0 Post(s)
    0 Thread(s)

    Lightbulb Sprite with complicated positioning case

    I have many sprite images which I don't know how to replace original css with complicated positioning case and here is one of them:

    When I replace background image mbg.jpg,mbgg.jpg,mbgr.jpg,mbgh.jpg with sprite image sprite_mbg.png and also add background-position to css of input, the button color become mixing due to the width and position.

    Here is original css

    Here is the wrong example

    /*Sprite Image generated by Instant Sprite - Generate CSS Sprites Instantly*/
    .sprite { background: url('') no-repeat top left; width: 40px; height: 40px;  }
    .sprite.mbg { background-position: 0px 0px;  }
    .sprite.mbgh { background-position: -50px 0px;  }
    .sprite.mbgg { background-position: -100px 0px;  }
    .sprite.mbgr { background-position: -150px 0px;  }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    462 Post(s)
    8 Thread(s)
    The problem is that your sprite image squares are only 40px wide, but you need them to be much wider. You can't use repeat-x, because that will mean that other colors either side will show. You need to redo the sprite image with each color above the other, and then you'll need to adjust the negative offsets accordingly (pulling the image up rather than pulling it left).

Tags for this Thread


Posting Permissions

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