By timezero on

Hi, I have been trying to replace the h2 with an image using CSS but the image just won't show up. I was wondering if it might be so that drupal blocked this because of security reasons?

.block-gallery .h2.title {
 background-image:url("image.gif");
}
⋅ Categories: Drupal 6.x

Comments

roginald’s picture

roginald commented

should be:

.block-gallery h2.title {
background-image:url("image.gif");
}

you have an extra '.' before the h2 selector.

Gary Feldman’s picture

Gary Feldman commented

Remove the period before the h2. The period tries to treat it as a class name, but it's a tag name.

timezero’s picture

timezero commented

Hi, thanks for your reply!

I tried removing the the period but with the same result. Any other property inside the CSS tag will be formatted correctly. However the picture does no show up, I've tried linking it with both full url and relative url.

Any help would be gladly appreciated!

rachel_norfolk’s picture

rachel_norfolk
Primary language English
Location UK
commented

where is image.gif? The location is relative to the css file, so you will need to make sure the file is next to the css or place directory names in the css.

Finbarr’s picture

Finbarr commented

You will probably want it to look a bit more like this:

.block-gallery h2.title {
   background-image:url("image.gif");
   display: block;
   /*or 'float:left/right' or 'position: absolute' depending on position*/
   width: [insert image width];
   height: [insert image height];
   text-indent: -999em; /*will stop the h2 text sitting on top of the image*/
}
timezero’s picture

timezero commented

Thank you for the code!

I tried it but the image still won't render. I put the image in the same folder as the css file but it does not show up. I also noticed Firebug does not show the background-image-tag at all. I am thinking maybe there is some filter preventing it from loading.

Finbarr’s picture

Finbarr commented

Try something like this:

body #page-wrapper-id .block-gallery h2.title {
   background: red url("image.gif") center no-repeat; /*background not background-image!!!!! If you see any red, something wrong with image*/
   display: block;
   /*or 'float:left/right' or 'position: absolute' depending on position*/
   width: [insert image width];
   height: [insert image height];
   text-indent: -999em; /*will stop the h2 text sitting on top of the image*/
}

Sounds like it may be a preference rule.

canyonbreeze’s picture

canyonbreeze commented

You can install the Web Developer toolbar in Firefox. Great for tracking down CSS issues. If the CSS doesn't show at all then there is probably an error with it, that would be normal behavior.

Finbarr’s picture

Finbarr commented

Firebug - he said he uses it already.