CSS won't get background image

**zincoxide** · 07-20-2007, 03:42 PM

I'm helping someone out with his CSS layout for a CMS (Joomla!). We've run into a snag that I can't figure out so I thought I would bring it here.

He has installed a SEF extension which inserts <base href="http://www.site.com" /> into his <head> tags. The problem is that this is causing a conflict for the url() value for the property background-image:

I was wondering how we can work around this. The base tag is setup and works fine for all the references with the HTML document. My first thought was that when I was trying to use relative paths within CSS for the image that it was referencing it from the <base> tag and not the location of the CSS file. So, I told him to reference it from the root. This didn't work.

Next, I told him to use an absolute path to the image with url(). However, this didn't work either.

I come to you and wonder if you can help out at all. Basically, we are trying to implement the "faux column" technique but the image isn't being repeated for some reason.

I should state that when I remove the <base> tag entirely it works fine. Can anyone help here?

**LadynRed** · 07-20-2007, 08:17 PM

CSS doesn't 'read' the HTML so the <base> tag is useless, CSS won't 'obey' it at all. The urls in your CSS are going to have to be RELATIVE to the CSS file itself, so if you have your images in a folder off the root and the css file in the root, then the path will be 'images/xxx.gif'.

Why do you need the <base> tag ? Is that a Joomla requirement ?

**zincoxide** · 07-21-2007, 05:42 PM

Quote:

Originally Posted by LadynRed

CSS doesn't 'read' the HTML so the <base> tag is useless, CSS won't 'obey' it at all. The urls in your CSS are going to have to be RELATIVE to the CSS file itself, so if you have your images in a folder off the root and the css file in the root, then the path will be 'images/xxx.gif'.

Why do you need the <base> tag ? Is that a Joomla requirement ?

I realize CSS doesn't read HTML however when the base tag is included in the HTML file my URL refferences in the CSS file break down. Background images don't load at all.

The base tag is added Joomla because of the search engine friendly extension had been added. I have tried absolute and relatives paths and neither work once the base tag is in the HTML.

I really need to figure out a solution because I need the SEF extension installed so that I can use the faux coloumn technique.

**LadynRed** · 07-23-2007, 03:15 PM

Why do you need a SEF extension to use the faux-column's technique ?
Do other styles get applied correctly ?

**zincoxide** · 07-23-2007, 10:34 PM

Everything works correctly except this one thing. However, I don't know yet, but I may have figured it out.

As for the SEF, it is just to change from the dynamic URLs with all the variables to something more readable. It has nothing to do with the styles or anything. It just so happens that I get the problem when it is enabled because it places the BASE tag in the head section.

**LadynRed** · 07-24-2007, 02:47 PM

Well, if you figured it out, post your solution, others may benefit from it.

**zincoxide** · 07-30-2007, 10:23 PM

I don't know what I did

I think it was just a relative path thing. There must have just been a typo somewhere.

Sorry.