Forum Moderators: not2easy

Message Too Old, No Replies

NN 4.7 Background Image

Correct positioning code for BG image

         

PowerPoint Pete

8:29 pm on Nov 5, 2003 (gmt 0)

10+ Year Member



I was having problems in MAC IE5 with js menu positions rendering wrongly when running an external css that included background position elements.

I have since corrected the problem by just reincluding the background position tags back within each page.

I was wondering if this is the right way to do it?

Secondly NN 4.7 renders the background in a different location to IE on both mac and PC as well as Mozilla and Opera. Is this just the way it is or can I correct it?

From: HTML
<body background="indeximages/background.gif" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0">

From: CSS
html BODY {
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
}

The original CSS file that was cusing the problem is below:

body {
background-color: #ffffff;
background-image: url(../commonimages/background_content.gif);
background-position: "0% 0%";
background-repeat:no-repeat;
border:0px;
padding:0px;
color:#ffffff;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;

}

DrDoc

9:15 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A couple things...
You shouldn't use quotes around any porperty values.
Also, consider using shorthand declarations:

background: #fff url(../commonimages/background_content.gif) no-repeat 0% 0%;

Now, the other problem is that NN4 is very buggy, so it might not work anyway :(

TheDoctor

10:19 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



NN4's handling of background images is buggy. I design my NN4 presentation not to use one. You can do this by moving the definition of your background image out of the main body rules and placing it so that NN4 doesn't see it, eg


@media all {
body {
background-image: url(../commonimages/background_content.gif);
}
}

You might want to change the background-color attribute if you do this.