By ansuzmannaz on

I just began working on a Drupal 6 theme for my website, and I'm having trouble getting background images to load. Since this is only my second attempt at creating a theme, I figured that I would use the Garland theme as a template and modify it from there. Anyhow, I am trying to get the primary links list area at the upper-right to display background images that switch out when I hover over the links. The problem is, they won't show up. I don't think there's anything wrong with my syntax, and I'm literally at my wits' end as to what to do.

The CSS in question is below:

#header ul.links {
list-style-type: none;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
position: relative;
float: right;
}

#wrapper #container #header ul.links li {
padding: 5px;
}

#wrapper #container #header a {
font-family: Herculanum, sans-serif;
background: url("/images/runicbutton_normal.jpg") no-repeat;
text-decoration: none;
font-size: 14pt;
z-index: 3;
}

#wrapper #container #header a:link,
#wrapper #container #header a:visited {
background-image: url("/images/runicbutton_normal.jpg");
background-repeat: no-repeat;
color: #734025;
}

#wrapper #container #header a:hover,
#wrapper #container #header a:active {
background: url("/images/runicbutton_normal.jpg") no-repeat;
color: #eeddaa;
}

The odd thing is that I have a background-image declared for the #wrapper

, and it displays right. However, for every other
tag or element I declare a background image, the image won't display at all. Could anyone shed some light on this? Many thanks.
⋅ Categories: Drupal 6.x

Comments

thorshammer’s picture

thorshammer commented

... is structured as a <ul>, with all the contained links in <li> tags. Further, typically the class li.leaf is applied in Primary Links, and THAT is the item you want to include in your styling - along with li a:link, a:visited and a:hover.

As for referencing images used as backgrounds, you have to keep in mind the paths you use will depend on the context. Above you are using a relative path, but in many instances that won't work. The context variations are abit too much to get into here. It's best to stick with using variables to declare an absolute path (until you're more sure of the specific paths required in each context) - something like:

background-image:url('. base_path() .$directory .'/images/runicbutton_normal.jpg

NOTE: base_path() gets you to the installation root, and then $directory takes the path down to your theme level. So all you do after that is add the theme folder location.

mndonx’s picture

mndonx commented

If your images folder and your style.css file are at the same level in your theme's folder structure, then you only need:

#wrapper #container #header a {
  background: url(images/runicbutton_normal.jpg) no-repeat left top;
}

You may need that extra info in the background style for it to work properly. But that extra backslash will send it looking for an images folder at the root of your site, not the theme.

It's not contextual if it is a reference from the theme's style.css file directly to the theme's images folder. Plus you can't use php in your css file! :)

dalegrebey’s picture

dalegrebey commented

Not too sure, right off the top of my head, but potentially this might be the problem.

background-image: url("/images/runicbutton_normal.jpg");

What I am wondering is if the initial / to your background image is destroying the path. I never include that initial /

Try this:

Background: url(images/runicbutton_normal.jpg);