Why has the css suddenly stopped displaying background images?

HTML & CSS
1

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

You have the following rule in your CSS (here unminified) (“maxified”?):


.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?

3

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

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.

5

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.

6

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

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.

8

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

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).

10

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

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.