deldalton Posted September 18, 2013 Share Posted September 18, 2013 (edited) 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 September 18, 2013 by deldalton Link to comment Share on other sites More sharing options...
dsonesuk Posted September 18, 2013 Share Posted September 18, 2013 You might want to include no-repeat within background declaration, as it is on by default. Link to comment Share on other sites More sharing options...
davej Posted September 18, 2013 Share Posted September 18, 2013 The examples generally show negative coordinate values. http://www.w3schools.com/css/css_image_sprites.asp Link to comment Share on other sites More sharing options...
deldalton Posted September 19, 2013 Author Share Posted September 19, 2013 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 More sharing options...
dsonesuk Posted September 19, 2013 Share Posted September 19, 2013 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 More sharing options...
Ingolme Posted September 19, 2013 Share Posted September 19, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now