SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why has the css suddenly stopped displaying background images?

    Hi~
    I have been making changes to my site and backing up my work. The background images that are used in the CSS have stopped displaying correctly in most browsers. What could cause this?

    I thought it was a new sprite that I had created. I had changed the css, and find out it had errors, so I replaced it with the old CSS to see if that would fix it. No it didn't fix it. The images still weren't showing, so it seems that it isn't the CSS file, but something is causing the css file to not display correctly. I have been backtracking my work. The funny thing is that it does o.k in some browsers now and yesterday it was all fine. It just suddenly appeared overnight.

    If it worked yesterday I would think that it must have been something I did then. But I don't think so.

    Where do I find what is causing this? Site is: esl in sider (dot) com

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You have the following rule in your CSS (here unminified) ("maxified"?):

    Code CSS:
    .sprites {
        background-image:url(../images/sprite.png);
        background-color:transparent;
        background-repeat:no-repeat;
    }

    But when I searched your HTML, I couldn't find any element with a class of "sprites". Could that be the problem?
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. Well yes and no. Yes it's probably a problem-which I am not sure how to properly code-I am far from an expert, but it doesn't seem to be the reason why those images aren't displaying since:
    1. I replaced the css file with the old css (without the sprite/errors) and the images still didn't show.
    2. Even with those errors everything was fine for about 5 days. And then I woke up today with this problem.

    CSS validator said this, for example is an error: .right{background-image: (#nav-right_jpg); before it was a sprite it said .right{background-image: url(nav-right.jpg);

    So I tried to match it with the info given by the sprite generator. Probably a feeble attempt, but it was working.

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The "5 days" thing is a little disconcerting, but missing classes would explain why going back to the old CSS didn't fix anything: the change would have been in your HTML, not the CSS.
    I'm the web overlord for Graphic Business Systems

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,719
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Why do you have those hash tags in the file names of each image? Take those out.
    Also, where in the HTML do you assign the classes to the HTML elements? Aka .sprites{}. There isn't a single element in the HTML that has that class added to it.

    Edit-Ninjad.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, I figured something out. I cleared my browsers cache. I put the old code back. Yeah so the problem is with my poor css sprite work. The hashtags were given by the sprite generator like this for example:
    #nav-right_jpg {
    height : 35px;
    width : 11px;
    background-position : -962px -0px;
    }


    So that's why I added the .right{background-image: (#nav-right_jpg); to replace the .right{background-image: url(nav-right.jpg);

    I thought that did the trick but I was wrong right? You have mentioned html, so how would i code this in the html index.php/template?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,719
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You have classes in the CSS. Good. But it isn't being applied to anything. You have the psuedo code of this...

    #css{imageSprite}

    <div>asdf</div>

    Good stuff right? Why is there no image on there being applied to <div>? I leave that to you to figure out The same case scenario is being applied to your code.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    Yeah this is the first time I tried that. I don't know how to use all that code from the generator and where to put it exactly. Any advice or articles that I could read to figure this out?

    I guess I thought it's a sprite with many images combined and it's not one individual image like before they are all together, so how do you put the exact image there and not just "sprite.png"?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,719
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    If you mean get a certain image to show in the sprite, then you have to mess with hte background-position and "move" the image around until the specified image you want showing, shows.

    I hope that's what you meant. Though have you checked your HTML to see if you even did something like class="sprites"? As far as I saw, you didn't (just did simple CTRL+F to search).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you mean get a certain image to show in the sprite, then you have to mess with hte background-position and "move" the image around until the specified image you want showing, shows.

    I hope that's what you meant. Though have you checked your HTML to see if you even did something like class="sprites"? As far as I saw, you didn't (just did simple CTRL+F to search).
    O.k I thought about it and understand about what you said about the html. The thing is this is in the template and on everypage. It's not on just one or two pages.

    So the the original css (before I tinkered with it to add the sprite) was just in the index.css file not in html on the page. Hope that makes sense.

  11. #11
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Before I had the sprite I had this code for example:
    .homeleft-box .bottom{background-image:url(../images/left-bot.jpg);background-repeat:no-repeat;background-position:left bottom;padding:15px 13px;min-height:312px;_height:auto!important}

    But I don't want it to go here: url(../images/left-bot.jpg); I want it to use this image from the sprite: #left-bot_jpg{height:37px;width:232px;background-position:-246px 0}


    I want to use the image in the sprite. So to me it seems like that is the part that I must change.


Bookmarks

Posting Permissions

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