Jump to content

CSS Sprites


deldalton

Recommended Posts

Good day,

 

I have the following HTML code ...

<body>   <div id="navButtonContainer">      <img id="navButton" src="images/transparent.png" class="frame1"/>   </div></body>

and the following CSS code ...

.frame1 {   width: 200px;   height: 100px;   background: url(images/imageSS.png) 0px 0px;}.frame2 {   width: 200px;   height: 100px;   background: url(images/imageSS.png) 200px 0px;}.frame3 {   width: 200px;   height: 100px;   background: url(images/imageSS.png) 400px 0px;}

I have some JS that modifies the <img/> class from "frame1" to "frame2" to "frame3" and then it would start again.

 

I've used my browser's developer tools and can confirm that the className is being modified correctly. But, the background image never appears.

 

Can anyone tell me why it isn't working? I thought perhaps it was because it was an <img/> element, as I'd read somewhere that the background property doesn't work on <img/> elements but I've tried it just as a div and that hasn't worked either. Also, w3schools suggests in their tutorial that an <img/> element shouldn't be a problem.

Edited by deldalton
Link to comment
Share on other sites

You might want to include no-repeat within background declaration, as it is on by default.

 

dsonesuk. Providing my coordinates are correct, and the "window" I've created for it has the correct dimensions then that shouldn't be a problem. But, I'll throw it in for good measure.

 

 

The examples generally show negative coordinate values.

 

http://www.w3schools.com/css/css_image_sprites.asp

 

davej. You're right, the examples do generally show negative coordinate values. I have tried this but it hasn't made a difference. And, the first image (located at 0, 0) should be displayed even if the other values were incorrect.

Link to comment
Share on other sites

dsonesuk. Providing my coordinates are correct, and the "window" I've created for it has the correct dimensions then that shouldn't be a problem. But, I'll throw it in for good measure.

 

Actually i have found IF you DON'T set this, positioning IS ignored and it repeats showing the image at its normal starting position the top/left of parent element, So setting this is a must for using sprites.

Link to comment
Share on other sites

Actually i have found IF you DON'T set this, positioning IS ignored and it repeats showing the image at its normal starting position the top/left of parent element, So setting this is a must for using sprites.

I've noticed that the repeat parameter actually has no effect and is irrelevant to the CSS sprite technique.

Here's the W3Schools example working with repeating sprites: http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...