Hello everyone!

 

I have a website which is http://www.urbanelementz.ca ... I'm still learning new techniques before I start my new design. I have a question which I'm hoping to find the answer to. =0)

Please note that I'm quite familiar with CSS sprites and can make mouse-over/rollover sprites as well as static image sprites. I use about 7 or 8 major sprites on my website that control most of the images and multiple mouse-overs (such as the menu, etc).

 

My question: I have about 8-10 DIV's that use background images. As of now, each div has it's own background-image. Either I'm missing something very simple or I'm just stumped because I can't seem to code it properly to work.

 

My problem: I know how to make the sprite, I know how to link to the sprite but when you use the "background-position: 0px 0px" option it will move the background image position in the DIV and not the background position on the image to show the proper sprite.

 

You can view my CSS file here: http://www.urbanelementz.ca/css/style.css Note that it's not fully organized or optimized at the moment because I'm making changes.

 

Please take a look at the css sprites which are all located towards the bottom and have comments so you can see which ones they are.

Am I missing something obvious? Maybe I'm sleep deprived. =0)

 

If someone can point me to a tutorial or just paste the proper coding and description of how to do it, that would be great.

Thanks so much!

I don't understand what the problem is ?

I don't understand what the problem is ?

 

OK... Sorry I guess I didn't explain myself well enough.

 

What happens if I have a div that is 500x500px and I have a 50x50px image that's on the sprite and I want it to show up only in the top right hand corner of the div. Then it will show the whole sprite and not just that small piece. It works great if the piece of the sprite is the same size as the div but if the piece of the sprite I want is smaller than the full size of the div then it wont work. It will show more than just the piece of the sprite that I define with the background-position property.

 

Does that make sense?

 

There's ways to work around it like adding color space to the div to make it the full size. However, if I do that it will make the sprite a lot bigger than needed and I would be better off with individual images.

 

Same goes for the X or Y axis repeating image? If I have a div that's 50x800px and I want the a 50x50px piece of the sprite to repeat vertically down the div, it will show more of the sprite than needed. Actually, thinking about it... I guess I would put the 50x50px image on the sprite at the bottom of the sprite so it wouldn't show anything below... I think I'm starting to understand the vertical or horizontal repeating aspect but as for the first question, I'm not sure what to do.

 

Am I missing something?

Basically I don't think you can do it because in css there is no attribute similar to "Background-size" which is really the kind of thing you want.

I think you'll have to make another container of the right size and position that with the background image within your original container.

I ran into this recently, would be interested to hear if there actually is a solution.

Edited June 18, 201115 yr by Gibson

Yes until background-size is supported by more browsers (I think currently its Chrome, Safari & Opera) extra markup would be needed

Edited June 18, 201115 yr by mteam

Thanks guys. So what your saying is that background-size will work but is not supported by all browsers yet? Well... I just looked it up at the link below...

 

http://www.w3schools.com/css3/css3_pr_background-size.asp

 

Background-size look like it's supported by all browsers according to w3schools.com .... So this is what I would need to make this work. Correct?

Actually, Maybe background-size isn't what I want because that would just compress or stretch the full sprite, not contain the image to that specific size. (If that makes any sense). lol.

Yeah I think the easiest way to do it for now is you have to make a seperate image containing just that little image you want, and use that as the background image instead of the main sprite. One more server call, I know, but there ya go.

Thanks guys. So what your saying is that background-size will work but is not supported by all browsers yet? Well... I just looked it up at the link below...

 

http://www.w3schools.com/css3/css3_pr_background-size.asp

 

Background-size look like it's supported by all browsers according to w3schools.com .... So this is what I would need to make this work. Correct?

 

IE9 but not earlier IE versions and most people haven't upgraded to IE9 yet (which needs WINDOWS 7).

IE9 but not earlier IE versions and most people haven't upgraded to IE9 yet (which needs WINDOWS 7).

 

Yea good call. I think it's just not worth it right now. Damn internet explorer. They really need to get their sh*t together. lol.

Edited June 19, 201115 yr by urbanelementz

It works great if the piece of the sprite is the same size as the div

 

You answered your own question right there!

 

What i would do is give your 500 x 500 div a position of relative and then absolute position your smaller divs for your sprites inside that? The div will always need to be the same size as your sprite, which you have already realized!

 

And i have attached a high end designed illustration to further explain my methods!

 

You answered your own question right there!

 

What i would do is give your 500 x 500 div a position of relative and then absolute position your smaller divs for your sprites inside that? The div will always need to be the same size as your sprite, which you have already realized!

 

And i have attached a high end designed illustration to further explain my methods!

 

 

Neil,

 

Thanks for helping me work this out. I figured that was the case. However, shouldn't the large div be positioned "absolute" and the inner div's be positioned "relative" that way their relative to the larger div?? I know how to use the position property but I think that's how I would do it? no?

 

By the way. I checked out your website. Love it. Nice, sleek and I love your work. We need to talk. lol. Email me. evan{at}urbanelementz.ca ...

 

However, shouldn't the large div be positioned "absolute" and the inner div's be positioned "relative" that way their relative to the larger div?? I know how to use the position property but I think that's how I would do it? no?

 

 

No, that's not how it works. Try it and you will see what i mean. I explained the process on my blog....

 

 

By the way. I checked out your website. Love it. Nice, sleek and I love your work. We need to talk. lol. Email me. evan{at}urbanelementz.ca ...

 

Thank you very much. Had a look at yours to and it's very nice

No, that's not how it works. Try it and you will see what i mean. I explained the process on my blog....

 

Thank you very much. Had a look at yours to and it's very nice

 

Yea I was playing around with it today and you're right. Sorry about that. I just recently started using the "position" element and I had them backwards.

 

Thanks very much. Happy to hear you like it. We should get in touch. I'd like to hire you for some custom images if you're up for it. I have some work piling up and could use your help.

 

Thanks.

Yea I was playing around with it today and you're right. Sorry about that. I just recently started using the "position" element and I had them backwards.

 

Thanks very much. Happy to hear you like it. We should get in touch. I'd like to hire you for some custom images if you're up for it. I have some work piling up and could use your help.

 

Thanks.

 

Nice one Evan, i just emailed you.

 

Speak soon