Background image and color not working

Question

Background image and color not working

Currently I am working on a new website for the company I work for. The current design has a background image (png) and a background color for computers with bigger resolutions. I used the following css for this:

body {
background:#000;
background-image:url(images/Background.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top;
text-align:center;
z-index:0;
}

The big problem at this moment is, that the page will load in Safari but won't show my background image and color. I fired up Element Inspector to find out what it could be.

background-attachment: scroll;
background-color: transparent;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

This is all I can get. This website works on windows (XP, Vista & 7) with the following browsers IE6, 7, 8, Firefox & Opera. For Mac OS X I works with Opera and Firefox. The only two main stream browsers which also have the exact same problem are Safari & Chrome, the problem is the same on the Windows & Mac versions (I have a beta of Chrome for Mac).

Currently I am getting very irritated that I just can't get it to work, I am a web designer using Macs. I tested the website on 4 different Macs (10.4 - 10.5), no success at all.

I also tried to remove some MIME types in the PNG I used for the background, but no result.

Hopefully someone recognizes this problem cause I searched a lot on google the past week and haven't been able to find a solution. Thanks.

iMac, Mac Mini, Mac OS X (10.5.8)

Posted on Aug 25, 2009 6:18 AM

Reply

Answer 1

Aug 25, 2009 7:16 AM in response to didierstouten

Currently I am working on a new website for the company I work for. The current design has a background image (png) and a background color for computers with bigger resolutions. I used the following css for this:

body {
background:#000;
background-image:url(images/Background.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top;
text-align:center;
z-index:0;
}

The big problem at this moment is, that the page will load in Safari but won't show my background image and color. I fired up Element Inspector to find out what it could be.

background-attachment: scroll;
background-color: transparent;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;

This is all I can get. This website works on windows (XP, Vista & 7) with the following browsers IE6, 7, 8, Firefox & Opera. For Mac OS X I works with Opera and Firefox. The only two main stream browsers which also have the exact same problem are Safari & Chrome, the problem is the same on the Windows & Mac versions (I have a beta of Chrome for Mac).

On top of the background I have 2 Flash banners running with both have a transparent pn

Currently I am getting very irritated that I just can't get it to work, I am a web designer using Macs. I tested the website on 4 different Macs (10.4 - 10.5), no success at all.

I also tried to remove some MIME types in the PNG I used for the background, but no result.

Hopefully someone recognizes this problem cause I searched a lot on google the past week and haven't been able to find a solution. Thanks.

Edit: I just edited my template files and added a html style background and color to the file which makes it work for safari and google chrome but now the background is not centered and displayed multiple times when you have a high resolution. The strange thing is the Element Inspector:

background-color: black;
background-image: url( http://website.nl/new/wp-content/themes/template_name/images/Background.png);

I did not redefine my css, so does anybody knows what is going on?

Reply

Answer 2

amac44

Level 1

0 points

Aug 26, 2009 12:29 PM in response to didierstouten

Could try backgound-color instead of background, but it shouldn't matter. I am having the same problem either way. Rather annoying! If I can stop beating my head against the wall long enough to figure this out I will let you know.

Re: your edit, I'm not sure I understand. You moved those CSS declarations into the document rather than link to an external css file? I'm not sure what is unexpected about the Inspector results, but those other side effects are odd.

A.

Reply

Answer 3

Aug 27, 2009 2:50 AM in response to amac44

Hello, yeah it is becoming pretty annoying which shouldn't be necessary.

@ my edit, it means I have defined a background in HTML (which is also possible);
<body bgcolor="#000000" background="images/Background.png"> after doing that, Safari finally tells me that I have a background according to the CSS!

Pretty strange that adding a piece of good old HTML makes Safari thinks that my CSS has a background defined.

Reply

Answer 4

amac44

Level 1

0 points

Aug 28, 2009 10:27 AM in response to didierstouten

I was able to accomplish the same thing by adding the body style in the <head> area of the document.

If I create a simple document with body background defined in an external css, it works fine. So I don't know why my (and apparently your) particular case is different. One of those things that's just not worth figuring out, at least not to me ... if anyone is so moved, I saved out a version of my case and posted a zip at http://www.bloggabooka.com/webkit/cssbg.zip

Reply

Answer 5

Nov 12, 2009 9:20 AM in response to amac44

Found this thread after checking my site in Safari and Chrome only to find my background image and color not working.

Removing this line: @charset "utf-8";
From the top of my CSS file fixed the problem. Dreamweaver adds it to all new CSS files. I have no idea why but apparently specifying the character set causes a "body" css tag not to work.

Reply

Answer 6

Dec 6, 2009 4:53 AM in response to didierstouten

As I understand it, the problem lies in the child-parent nature of the background & background-image properties. While background can handle the whole host of specifications (image, color, positioning, etc.) in one in-line declaration, the background-image property just helps us specify an image (and, thus, is a child of the background property).

Your first declaration:

...
body {
background:#000;
background-image:url(images/Background.png);
...

might be logically parsed by Safari to mean

...
body {
//the full set of *background properties* will be: {the color black}
//the background-image property should be ('/path/img.png')
...

whereas that sort of declaration might be done (a tad more orthodox) two other different ways:

...
body {
background: #000 url('/path/img.png') no-repeat fixed center;
...

or, individually, as:

...
body {
background-color: #000;
background-image: url('/path/img.png');
background-repeat: repeat-x;
(etc.)
...

I might be mistaken; it's been a long time since I had to wrestle with the browser standards headache, but my general voodoo sense of what Safari might prefer leads me to believe you'd be safer with one of the latter two options.

¡Suerte!,
Roberto Ryan

Reply