lil css help....

[LA-Fairy]

i know i will be pulling my hair out for not seeing it..
but for some reason..i cannot get the bg image to show..it stays white..
i cleared all the things that said white...but nothing..
then instead of having an single file..i added the css to the layout itself...nothing all white..

here is the code

Code:

<style>

h1 {font-family: Verdana, Arial, Times New Roman; color:#4A1018; border: 1px solid color red; background-color: #000000; padding: 0px; font-size: 14px; text-align:center;}

hr {color:#000000; border:1px solid red; background-color:#000000; height: 10px; }

A:link {text-decoration: none; color: white; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}  

A:hover {text-decoration: none; color: C71A1A;}

A:visited {text-decoration: none; color: black; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}

A:hover {text-decoration: none; color: C71A1A;}

body {scrollbar-arrow-color: white;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #616161;
scrollbar-face-color: #000000;
scrollbar-shadow-color: white;
scrollbar-highlight-color: #616161;
scrollbar-3dlight-color: white;
background-repeat: repeat-y;
background-image: images/index_10.jpg}
    </style>

where does the image needs to be...? i tried it at the top with its own body...i tried it with '' nothinnnggg...white..all the way..
the last few layouts i made with single css,i wanted the bg to be white..but now..i don't and now it won't change..LOL...my luck eh?

[Vangs]

Change this line:

Code:

background-image: images/index_10.jpg}

to this:

Code:

background-image: url(images/index_10.jpg);}

[LA-Fairy]

hmm,thanks,but  now that only changed the hr outline to red...weeiirddddd

so this is the css i used in the layout itself

Code:

<style>
h1 {font-family: Verdana, Arial, Times New Roman; color:#4A1018; border: 1px solid color red; background-color: #000000; padding: 0px; font-size: 14px; text-align:center;}

hr {color:#000000; border:1px solid red; background-color:#000000; height: 10px; }

A:link {text-decoration: none; color: white; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}  

A:hover {text-decoration: none; color: C71A1A;}

A:visited {text-decoration: none; color: black; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}

A:hover {text-decoration: none; color: C71A1A;}

body {scrollbar-arrow-color: white;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #616161;
scrollbar-face-color: #000000;
scrollbar-shadow-color: white;
scrollbar-highlight-color: #616161;
scrollbar-3dlight-color: white;
background-repeat: repeat-y;
background-image: url(images/index_10.jpg);}
    </style>

and this is the sigle css file i tried to

Code:

body  background-image: url(images/index_10.jpg),font-family: Verdana, Arial, Times New Roman; font-size: 11px; color: black;}

h1 {font-family: Verdana, Arial, Times New Roman; color:#white; border: 1px solid color red; background-color: #000000; padding: 0px; font-size: 14px; text-align:center;}

hr {color:#000000; border:1px solid white; background-color:#000000; height: 10px; }

A:link {text-decoration: none; color: white; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}  

A:hover {text-decoration: none; color: C71A1A;}

A:visited {text-decoration: none; color: black; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}

A:hover {text-decoration: none; color: C71A1A;}

body {scrollbar-arrow-color: white;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #616161;
scrollbar-face-color: #000000;
scrollbar-shadow-color: white;
scrollbar-highlight-color: #616161;
scrollbar-3dlight-color: white;
background-repeat: repeat-y;}

[Vangs]

In the CSS you used for the layout, you have set the HR tag to have a red outline:

Code:

hr {color:#000000; border:1px solid red; background-color:#000000; height: 10px; }

In your CSS file you didn't put a { after the body element, which is probably what is causing the problem.

[LA-Fairy]

hmmm..that didn't do anything..
let's see
the css file i use..now

Code:

body {background-image: url(images/index_10.jpg),font-family: Verdana, Arial, Times New Roman; font-size: 11px; color: black;}

h1 {font-family: Verdana, Arial, Times New Roman; color: white; border: 1px solid color white; background-color: #000000; padding: 0px; font-size: 14px; text-align:center;}

hr {color:#000000; border:1px solid white; background-color:#000000; height: 10px; }

A:link {text-decoration: none; color: white; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}  

A:hover {text-decoration: none; color: C71A1A;}

A:visited {text-decoration: none; color: black; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}

A:hover {text-decoration: none; color: C71A1A;}

body {scrollbar-arrow-color: white;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #616161;
scrollbar-face-color: #000000;
scrollbar-shadow-color: white;
scrollbar-highlight-color: #616161;
scrollbar-3dlight-color: white;
background-repeat: repeat-y;}

wow..for some reason the code for index2 and main file...didn't show all..how weird..LOL

[assie-chan]

It might be because you have "body" defined twice. When you define an element (like <BODY>) twice, it will automatically use the last one. Try combining the two body's in your CSS, and see if that doesn't fix your problem ^^;;

[Vangs]

It'll only use the last definition if you use an attribute twice, none of her body elements have matching attributes so none over-write eachother. Now as for your background problem, I don't know why I missed this earlier, you haven't put a semi-colon after your background-image attribute.

Code:

body {background-image: url(images/index_10.jpg); font-family: Verdana, Arial, Times New Roman; font-size: 11px; color: black;}

[LA-Fairy]

the bg still ain't showing..LOL..I don't get it..LOL..

so anyway...i uploaded the entire layout...
http://fairysdream.com/Layout_valentine/index2.html
and here is again the css..

Code:

body {background-image: url(images/index_10.jpg); font-family: Verdana, Arial, Times New Roman; font-size: 11px; color: black;}

h1 {font-family: Verdana, Arial, Times New Roman; color: white; border: 1px solid color white; background-color: #000000; padding: 0px; font-size: 14px; text-align:center;}

hr {color:#000000; border:1px solid white; background-color:#000000; height: 10px; }

A:link {text-decoration: none; color: white; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}  

A:hover {text-decoration: none; color: C71A1A;}

A:visited {text-decoration: none; color: black; font-family: Verdana, Arial, Times New Roman; font-size: 11px;}

A:hover {text-decoration: none; color: C71A1A;}

body {scrollbar-arrow-color: white;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #616161;
scrollbar-face-color: #000000;
scrollbar-shadow-color: white;
scrollbar-highlight-color: #616161;
scrollbar-3dlight-color: white;
background-repeat: repeat-y;}

* i still haven't modefied the css to fit the colors of the layout..LOL..but hey the bg ain't there yet..XD LOL*

can you find the error..I can't....i thought maybe an open tag..has happened to me before...

[Vangs]

I checked the url to the image, and its giving me a 404 error, the problem could be that you have either entered the wrong file name in the CSS, or haven't put the image in the correct place.

[LA-Fairy]

*hits head on keyboard thanks for pointing that out..ahh
i saved the index page straight to index2.html and the images i had entered without the #2..ahhh i knew it was something reaaaally simple!
thanks so much for going through this with me...
LOL....thanks!

[Vangs]

No problem, glad I could help!