...

View Full Version : CSS background-position



iLochie
08-16-2010, 10:33 AM
Hi there, I'm trying to position a background image from a class using a selector class. Problem is, Firefox 3.6 and Chrome 5 will not even recognize the selector class. What is the problem? What should happen, is the background should move displaying different parts of the image depending on the selector class chosen.


.profile-connection {background-image:url(../images/connections.png);background-repeat:no-repeat;display:inline-block;height:13px;width:50px;}
.profile-connection.1 {background-position:0 -52px;}
.profile-connection.2 {background-position:0 -39px;}
.profile-connection.3 {background-position:0 -26px;}
.profile-connection.4 {background-position:0 -13px;}
.profile-connection.5 {background-position:0 0;}

That's the CSS, and the HTML:


<div class="profile-connection 3">&nbsp;</div>

1 through 5 appear as 5 would, because the position isn't being set so it just stays at 0 0.

SB65
08-16-2010, 11:53 AM
Your html and css don't match. Try:


.profile-connection {background-image:url(../images/connections.png);background-repeat:no-repeat;display:inline-block;height:13px;width:50px;}
.profile-connection1 {background-position:0 -52px;}
.profile-connection2 {background-position:0 -39px;}
.profile-connection3 {background-position:0 -26px;}
.profile-connection4 {background-position:0 -13px;}
.profile-connection5 {background-position:0 0;}

and


<div class="profile-connection3">&nbsp;</div>

iLochie
08-16-2010, 06:08 PM
Your html and css don't match. Try:


.profile-connection {background-image:url(../images/connections.png);background-repeat:no-repeat;display:inline-block;height:13px;width:50px;}
.profile-connection1 {background-position:0 -52px;}
.profile-connection2 {background-position:0 -39px;}
.profile-connection3 {background-position:0 -26px;}
.profile-connection4 {background-position:0 -13px;}
.profile-connection5 {background-position:0 0;}

and


<div class="profile-connection3">&nbsp;</div>
No That would just divide all the selectors into separate classes. I don't wanna have to redeclare the background, etc within every class.

SB65
08-16-2010, 06:26 PM
Try with html:


<div class="profile-connection profile-connection3">&nbsp;</div>

met
08-16-2010, 06:46 PM
the problem i believe with OPs code is that css classes can't begin with numbers.

iLochie
08-16-2010, 06:58 PM
the problem i believe with OPs code is that css classes can't begin with numbers.
VERY GOOD TIP. Thank you, I will check to see if that was the issue!

Excellent, that worked after changing the numbers from 1 through 5 to c1 through c5. Thanks again.

SB65
08-16-2010, 07:05 PM
the problem i believe with OPs code is that css classes can't begin with numbers.

You're quite right. I've not come across chaining css classes in this way before. Not supported by IE6, I see (no surprise there then).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum