Zroid Posted April 10, 2006 Share Posted April 10, 2006 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 More sharing options...
smiles Posted April 10, 2006 Share Posted April 10, 2006 don 't you forget tag <style type="text/css"> .... </style> ??? Link to comment Share on other sites More sharing options...
Zroid Posted April 10, 2006 Author Share Posted April 10, 2006 don 't you forget tag <style type="text/css"> .... </style> ???<{POST_SNAPBACK}> Sorry, forgot to say that its an external css sheet file....Zroid Link to comment Share on other sites More sharing options...
smiles Posted April 10, 2006 Share Posted April 10, 2006 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; Link to comment Share on other sites More sharing options...
Zroid Posted April 10, 2006 Author Share Posted April 10, 2006 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; <{POST_SNAPBACK}> 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: #00104Cand 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 More sharing options...
Little Goat Posted April 10, 2006 Share Posted April 10, 2006 try this: background:url('yoururl'); Link to comment Share on other sites More sharing options...
Err Posted April 16, 2006 Share Posted April 16, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now