CodeIgniter: CSS cannot display images as background

Question

I'm using Codeigniter 2. I'm trying to display some images using the background url in CSS.

I have placed the images and css folders in my index.php directory level and I can access the images and CSS folders from my browser as well, so I don't think its an .htaccess problem.

My code for my CSS file is as follows:

.multiplebgs .upload-creative-browse-button:hover {
  background:
    url(/images/progress_meter_leftcap_round.png) 0 -200px no-repeat,
    url(/images/progress_meter_rightcap_round.png) 100% -200px no-repeat,
    url(/images/progress_meter_fill.png) 0 -200px repeat-x;
  color: #98BD5E;
}

For some reason, its not displaying the images even though the rest of the CSS styling loads fine.

which browser are you testing this on? they don't all support multiple background images — Ben
– Ben, Commented Oct 21, 2011 at 8:16
I'm guessing you have a similar declaration for the non-hover without the -200px, does that one work, and are you sure you're shifting it the right direction with the -200px? maybe it's meant to be 200px on your image sprite — Ben
– Ben, Commented Oct 21, 2011 at 8:18
actually i worked on it previously without using a php framework (hardcoded the darn thing). But i needed to port it over to codeigniter for uniformity. The code works fine. My problem is that when i use it with code igniter, the css doesnt seem to be able to get the picture.. — Aaron Lee
– Aaron Lee, Commented Oct 21, 2011 at 13:07
oh and i tested it on chrome 14, ff7, safari.... all of which, the original code (the one without a framework) worked fine and the one with code igniter doesnt — Aaron Lee
– Aaron Lee, Commented Oct 21, 2011 at 13:07

Matias Kinnunen · Accepted Answer · 2011-12-04 08:23:41Z

2

Because you said this:

I have placed the images and css folders...

I assume your folder structure is like this:

root
|--/css    (root/css)
|--/images (root/images)

So you have to specify image paths this way:

url(../images/img.png)

Here's the full code:

.multiplebgs .upload-creative-browse-button:hover {
  background:
    url(../images/progress_meter_leftcap_round.png) 0 -200px no-repeat,
    url(../images/progress_meter_rightcap_round.png) 100% -200px no-repeat,
    url(../images/progress_meter_fill.png) 0 -200px repeat-x;
  color: #98BD5E;
}

answered Dec 4, 2011 at 8:23

Matias Kinnunen

8,7103 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CodeIgniter: CSS cannot display images as background

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related