SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    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


    Code:
    /*Sprite Image generated by Instant Sprite - Generate CSS Sprites Instantly*/
    .sprite { background: url('http://s13.postimage.org/xmzbbctt1/sprite_mbg.png') 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
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    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

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
  •