SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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...background.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...ssV2/style.css

    The background image is located @

    http://www.boatsbuildingplans.com/wp...background.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. #2
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    HTML Code:
    background-color: #336699 
    background-image: url(http://www.boatsbuildingplans.com/wp-content/themes/NicheProfitPressV2/images/seabackground.jpg)
    background-repeat: fixed center no-repeat;
    for

    HTML Code:
    background: #336699 url('/images/seabackground.jpg') fixed center no-repeat;
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,184
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    The "header" images are showing OK, so I would go with the syntax and path that you use for them
    Code CSS:
    #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...background.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).

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •