Hi,
I am building/styling a Zen subtheme. I'm doing something quite simple using a background-image to replace a list item (<li>), but the image isn't showing up in the page.
I have checked my css syntax, my directory structure is identical to garland:
my_theme_name/
-various.tpl.php files...
-various.css files...
-my_theme_name.info
-images/
--node_bullet.png
in my my_theme_name.css I have placed a style declaration of:
ul li
{
background-image: url(images/node_bullet.png);
}
I have cleared my cache and this doesn't make a diff. Non-image styles are taking, like font-size, color, line-height and stuff like that. Just bg images aren't showing up.
Is the images path correct? Am I supposed to use absolute paths? That seems a bit much. Do I have to declare something in the my_theme_name.info file so drupal knows there an images directory in the theme?
I'm also using the "png_behave" module, but I figure since I'm using Firefox as my base browser, png's should still show up, shouldn't they?
I'm guessing there is a really simple answer, but I'm just not figuring it out.
I even bought the Drupal 6 Themes book, and oddly enough, not a single theme in the book's examples uses background-images. This is preposterous! The point of .css is to be able to style themes with bg-images... This is a designer's mainstay, don't you think?
What gives?
Thanks in advance for your help.
madamep
Comments
Install Firebug if you
Install Firebug if you haven't already. After your page loads, check out the "Net" tab and see if Firefox attempted to load your image If not, then you can assume that there's an issue with the stylesheet not being "seen" or applied to your element. If so, then you should be able to see if there was an error in loading it and what that error was. If there was no error, then check to see if maybe the background image is being positioned somewhere where it's not visible.
The Boise Drupal Guy!
I think I got it!
Hi Garrett,
Thanks so much for your prompt response!
I did figure it out. I loaded my css's URL at http://jigsaw.w3.org/css-validator/ and it wasn't a path issue at all, it was my css syntax.
I had written:
-> background-image: transparent url(images/node_bullet_test.png) no-repeat 0 0;
when it should be:
-> background: transparent url(images/node_bullet_test.png) no-repeat 0 0;
Gee -- do I feel silly, but I'm posting the solution so other sheep(ish) folks that come behind me can benefit from the error of my syntax!
I do have firebug and web developer, and I will try your solution for further troubleshooting. Thanks for the tip, that sounds like a good one!
Thanks again!
madame philosophe
so many thoughts...so little time.