ansaurus

Question

Can't get CSS Sprite to work..what am I doing wrong?

Answer 1

+2 A:

Your .sprite-bg rule for background-position, set as part of the composite rule for background (the top left part), has higher precedence than the stand-alone background-position setting for .sprite-3 because it appears later in the stylesheet.

Place the rule for .sprite-bg first.

Doug McClean 2008-12-30 21:49:39

Answer 2

+4 A:

Define a width and height for <div class="sprite-bg sprite-3">.

David Kolar 2008-12-30 21:52:53

Answer 3

+2 A:

the div is empty. put something inside. like space ( ).

Roni Schwarts 2008-12-30 21:54:26

Answer 4

+1 A:

Hrm, not quite sure what you're trying to achieve here. The multiclassing seems a bit messy. I've posted my method of spritemaps below, see if this does what you need. Usually this involves a combination of elements, the most common being an unordered list with links for navigation, but for this purpose it's just divs.

Also don't forget the order of background-position. background-position: |top| |left|;

That's screwed me up a couple of times. Finally, A List Apart has a great article on Sprite Maps (http://www.alistapart.com/articles/sprites/)

<html>
<head>
    <style>
    .sprite-container div {
       background: url(csg-495a902b04181.png) top left no-repeat;
       width: 20px; //width is neccessary
       height: 20px; //height is neccessary
    }

    .sprite-3 { background-position: 0 -188px; } 
    .sprite-4 { background-position: -20px -188px; }

    </style>
</head>
<body>
    <div class="sprite-container">
      <div class="sprite-3"></div>
      <div class="sprite-4"></div>
    </div>
</body>
</html>

Mike Robinson 2008-12-30 22:51:03

I'd consider extra divs worse then multi-classing... Multi-classing is great for removing duplication.

Tim K. 2008-12-30 23:02:29

Answer 5

+6 A:

Don't use a generator. Take the time to do it yourself from scratch. Then next time you use this method, you'll know what to look for when something has gone wrong and you'll answer your own question, and heck, maybe someone else's on Stack Overflow.

This generator isn't producing any meaningful class names for your styles, which means if you go to edit them later you're not going to know two classes from Tuesday what's going on unless you've memorized the numbers. Meaningful names will save you headaches when you return to your stylesheet later on.

Open up Photoshop, GIMP, or almost any modern image editing software. Make sure your program has the rulers option switched on, and measure your element's background image coordinates this way. In the absence of rulers - which is probably a rarity, you could always fudge around with the MeasureIt Firefox extension and the .png opened in a tab.

Angelina 2009-01-02 12:36:11

+1 good advice, the first paragraph says it all

jeroen 2009-02-06 14:18:14

Answer 6

A:

You could check an article of mine about CSS Sprites:
http://emiajnet.blogspot.com/2008/12/optimize-your-pages-using-css-sprites.html
Hope this helps.

Jaime Febres 2009-01-20 17:08:01

Answer 7

A:

As others have mentioned, your sprite-bg element needs to have either some content to give it a height / width, or have those properties specified in the css, thusly:

.sprite-bg {
  background: url(csg-495a902b04181.png) no-repeat top left;
  width: 100px; /* (or whatever the width should be) */
  height: 100px; /* (or whatever the height should be) */
}

As someone else mentioned, I'd move the rules for the .sprite-welcom1, .sprite-welcom3 and .sprite-3 to beneath the main .sprite-bg in the stylesheet.

David Heggie 2009-01-20 17:15:06

Answer 8

A:

2009-02-06 09:28:33

ansaurus

tags:

views:

answers:

Can't get CSS Sprite to work..what am I doing wrong?

related questions