Jump to content

Background pic not displaying via css


Zroid
 Share

Recommended Posts

Hi,I have a rather frustrating problem with a background that simply will not display under css but does from html using the same picture. So far I have :- checked the path- checked that the pic file is not corrupt- tried a jpeg instead of a png file- tried removing various other bits of code in the body{} including the fixed background and repeat.The problem being that if the css sheet goes down the site is unreadable due to the background being so dark. I'm sure it is something quite simple :)This is the site: WebpageAt the moment I am using:

<body background="images/background3.png">
to get around the problem and which works fine.The code in the css is currently commented out but normally it would be (I'll give the full css file incase something else is causing the problem):
body {            font-family: Arial, Verdana, Tahoma, Helvetica;            font-size: 12pt;            color: white;            background-image: url('images/background3.png');             background-attachment: fixed;            background-repeat: repeat-x;            width: 100%;            margin-left: auto;            margin-right: auto;            margin-top: 1px;            margin-bottom: 1px;        }        img  {            border: thin solid #000000;        }h2    {            font-family: Tahoma, Arial, Verdana, Helvetica;            color: #EE0000;        }                  h3    {            font-family: Arial, Verdana, Tahoma, Helvetica;            font-style: italic;            color: #1A3076;        }               h4    {            font-family: Arial, Verdana, Tahoma, Helvetica;            color: white;        }h5    {            font-family: Arial, Verdana, Tahoma, Helvetica;            color: black;        }        td    {            padding: 5px;            border-style: solid;            border-width: 1px;            border-color: black;        }        ul      {            list-style-type: square;        }        table  {        }a:link {color: yellow}a:visited {color: yellow}a:hover {color: red}a:active {color: yellow}                .indexdiv {                                  margin-left: auto;            margin-right: auto;            margin-top: 5px;            text-align: left;            color: blue;            width: 732px;            background-color: #000000;            border: thin solid #D6D6D6;          }          .Homecontentsdiv        {            background-color: #0F2B73;            font-size: 12pt;            text-align: left;            margin-top: 6px;            margin-bottom: 6px;            margin-left: auto;            margin-right: auto;            color: white;            width: 704px;            padding: 15px;            border: thin solid #D6D6D6;        }.contentsdiv         {            text-align: left;            margin-top: 6px;            margin-bottom: 10px;            margin-left: auto;            margin-right: auto;            color: black;            width: 704px;            border: thin solid black;            background-color: #E7E7E7;            padding: 15px;        }.contactdiv        {            text-align: center;            width: 730px;            color: yellow;            font-size: small;            font-weight: bold;            background-color: #000000;            border: thin solid #D6D6D6;            margin-bottom: 10px;            margin-left: auto;            margin-right: auto;        }
Any help would be much appreciated :)Zroid
Link to comment
Share on other sites

I think you should change your background 's size http://members.dodo.com.au/~rmwegner/images/background3.pngyour background is lighter at bottom part just keep the dark blueand then use
 background-image: url('images/background3.png');             background-repeat: repeat;

:)

Thanks for the suggestion smiles but it sort of defeats the purpose of having a vertically gradiated background. I may as well use:
background-color: #00104C
and do away with the background picture all together. People may not notice the gradient on lower resolutions but it is very noticeable on the higher ones. The picture is just tall enough to cover the highest vertical resolution on most normal monitors.Anyway, it looks like setting the background to a fixed colour is what I'll have to do at this stage :) Its only a bit of eye candy; its more important that the site be readable without the css sheet. It just seemed odd to me that the repeat and the fixed background attribute commands are functioning from the css file just fine, with the background set in html, but the css setting of the background image command isn't. All I get is a blank white background when the command is un-commented.Zroid
Link to comment
Share on other sites

or how about this:background: url(URL);I did it without the quotes around it. I haven't quite figured it out yet, but I had that problem too, it turned out to be those quotes around the url. It might of been because of the doctype...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...