Background CSS colour or image are not showing up in any browser

Get Started
1

Hi,

If anyone can help it would be greatly appreciated. I’ve already looked around the net and tried so many different things, but I still can’t figure out why the background CSS colour or image are not showing up in any browser? I know there can be certain problems with some browsers not showing properly, but i think this is a wider problem. I have checked it in Firefox, Safari and Google Chrome.

Here is the code from the CSS file

#body{
margin: 0;
padding: 5px 0;
background-color: #336699
background-image: url(http://www.boatsbuildingplans.com/wp-content/themes/NicheProfitPressV2/images/seabackground.jpg)
background-repeat: fixed center no-repeat;
font: normal 14px Arial, Helvetica, sans-serif;
color: #333;

Links to things I think you might need to look at are:

The main website address is located @

http://www.boatsbuildingplans.com

The CSS file is located @

http://www.boatsbuildingplans.com/wp-content/themes/NicheProfitPressV2/style.css

The background image is located @

http://www.boatsbuildingplans.com/wp-content/themes/NicheProfitPressV2/images/seabackground.jpg

I think that about cover it all, but please let me know if there is anything else you might need.

Thanks in advance,

Tony

2

The “header” images are showing OK, so I would go with the syntax and path that you use for them

#body{
	margin: 0;
	padding: 5px 0;
	background: #336699 url("../images/seabackground.jpg") fixed center no-repeat;
	font: normal 14px Arial, Helvetica, sans-serif;
	color: #333;
}

#wrapper{
	width: 777px;
	margin: 9px auto;
}

#wrapper p{
	font-family: Arial, Helvetica, sans-serif;
}

div.border-top-header{
	background: url(images/border-top-header.gif) no-repeat 0 0;
	width: 777px;
	height: 5px;
}

#header{
	background: #fff url(images/header.jpg) no-repeat 50% 50%;
	width: 777px;
	height: 134px;
	padding: 16px 0 3px 0;
}

If that doesn’t work, you can assume the syntax and path are OK and the problem lies elsewhere.

If I go to http://www.boatsbuildingplans.com/wp-content/themes/NicheProfitPressV2/images/seabackground.jpg it doesn’t load for me (unless it’s translucent or white) but my browser says it’s ~420 KB - pretty hefty weight IMHO.

So my guess would be the file is corrupt (try uploading again) or too heavy (try a smaller file to test).

3

Maybe add semicolon in the end of background-color and background-image properties. You may also change url into relative one.
I’d try to change these lines:


background-color: #336699 
background-image: url(http://www.boatsbuildingplans.com/wp-content/themes/NicheProfitPressV2/images/seabackground.jpg)
background-repeat: fixed center no-repeat;

for


background: #336699 url('/images/seabackground.jpg') fixed center no-repeat;
4

Thanks for your reply.

I’ve tried so many different variations, that i’d missed them off in this example, but even with them it still doesn’t work.

background-color: #336699;
background-image: url(http://www.boatsbuildingplans.com/wp...ckground.jpg);
background-repeat: fixed center no-repeat;
font: normal 14px Arial, Helvetica, sans-serif;

I also tried your other suggestion, but that didn’t work either unfortunately. I also tried various different versions of the image url path, e.g. with and with the ’ or ", …/images, the full path, basically everything i could think of!

background: #336699 url(‘/images/seabackground.jpg’) fixed center no-repeat;

but still, nothing.

As I say i have tried many different variations of all the basic differences but nothing seems to effect it in the slightest. This is what makes me think it must be something else, especially as it doesn’t work properly on any internet browser, bu i’m at a complete loss as to what it is!

5

Hi guys,

Thanks for the replies.

The good news is that I’ve now managed to get it working. I posted the problem in a few forums and tried all the suggestions, but nothing seemed to be working.

Then I deleted the site a reuploaded it and tried again. It was still being weird. The background colour was showing, but as soon as i tried with the image, it lost the colour too for some reason.

I’m not even sure what i did in the end to get it working, but at least it is!

Cheers again for you help

Tony

P.S. One quick question, the footer on the homepage is displaying weirdly outside of the white box. Any ideas why this is happening?