Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    17
    Thanked 5 Times in 5 Posts

    CSS background-position

    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.

    Code:
    .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:

    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Your html and css don't match. Try:

    Code:
    .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

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

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by SB65 View Post
    Your html and css don't match. Try:

    Code:
    .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

    Code:
    <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.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Try with html:

    Code:
    <div class="profile-connection profile-connection3">&nbsp;</div>
    Last edited by SB65; 08-16-2010 at 06:54 PM.

  • #5
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    the problem i believe with OPs code is that css classes can't begin with numbers.

  • Users who have thanked met for this post:

    iLochie (08-16-2010)

  • #6
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by met View Post
    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.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by met View Post
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •