CSS Background images not working

By thepocketgeek on 7 Dec 2009 at 20:31 UTC

I created a theme from scratch but I am having a bit of a problem. The background image used in the body tag shows up fine but anything that I assign as a background for a div container seems to be stripped from the CSS when it goes to the browser.

Here is the CSS I used to call one of the background images:

#header{ 
	background-image: url(sites/all/themes/mobile/images/header.png);
	background-repeat: no-repeat;
	width: 965px; 
	height: 180px;
	}

I used Firebug to see if I could figure out what the problem is but I am not seeing the background-image call in the css (containers.css)

Here is the website where I am testing the Theme: www.seraphim7.com

Anyone know what I might be missing?

I am using Drupal 6.x

Thanks

Comments

On

dadderley commented 7 December 2009 at 20:53

On http://www.seraphim7.com/

I am seeing this:
<div id="header" style="background-image: url(images/header.png);">

Then I am seeing this:

#header {
clear:both;
height:180px;
width:965px;
}

The inline style that you have will not work because the reference to the image is wrong.
Also, you have no bg image in your header style in your css sheet.

Get rid of the inline style and try this in your style sheet:

#header {
	clear:both;
	height:180px;
	width:965px;
	background-image:url(images/header.png);
}

I was only using the inline

thepocketgeek commented 7 December 2009 at 20:58

I was only using the inline to see if I could call the image up. I removed the inline comment, tried your CSS and cleared the cache on the site but the images are still missing. When you look at the CSS and saw that the background-image call missing that was what I was referring to when I said it looked like the CSS was being stripped.

Here is what I had on the actual containers.css file:

#header{
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	width: 965px; 
	height: 180px;
	}

]

Can you think of any reason that CSS code would get stripped?

Your theme is calling up this

dadderley commented 8 December 2009 at 02:36

Your theme is calling up this css sheet.
http://www.seraphim7.com/sites/all/themes/mobile/containers.css

Do you have some kind of theme switcher for mobile devices in place?
I suspect there is some theme switching going on here that you are not aware of.

Your code here reads like this:
#header{clear: both; width: 965px; height: 180px;}

Drupal does not modify .css files, it will aggregate them when you tell it to for performance. but it will not strip css out of actual files.

Theme Switcher?

thepocketgeek commented 8 December 2009 at 15:22

As far as I know, I don't think I have a theme switcher installed. Where would I check that? I didn't see anything listed under Mods in the admin section. It was a straight install of Drupal 6.14 using Fantastico Deluxe that was provided by my webhost. I haven't added any mods or anything else yet.

What should I be looking for?

I was making a guess based on

dadderley commented 8 December 2009 at 17:02

I was making a guess based on the theme name "mobile".
Anyway, when your style sheet is called up, there is no bg image in place for the #header. I downloaded your http://www.seraphim7.com/sites/all/themes/mobile and it is definitely not there.

Not sure what is going on. But drupal does not selectively yank out css from a theme's style sheet.
Perhaps there is some confusion about file names/locations and you are working on the wrong css sheet.