Jump to content

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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...