Solved: How to fix background on NS

NS does not support a fixed background. Sorry. With some heavy scripting it might be possible to make the background a layer in a table, make the rest of the content a second layer that scrolls, but it would only work in late model browsers and require serious DHTML to implement.

mscproj

ASKER

Anyway, if possible, can you give me the codes?

jbrugman

does this work for you?

(add the following between your HEAD tags) :

<STYLE TYPE="text/css">

body.bground
{
background-repeat:no-repeat;
bacground-image:put_the_url_here;
}

</STYLE>

Then make sure you don't specify a background in the actual BODY tag. Instead, add the following to this tag :

ID="bground"

e.g. : <BODY ID="bground" TEXT="..." ...>

oubelkas

You also might try this :

<style type="text/css">

BODY {
background-attachment: fixed;
}

</style>

Joseph

oubelkas

Mmmm....never mind my comment, cos it don't work. However I had it from http://www.htmlguru.com
(recommended by Michel)

And as you might see in NS, the background there is also fixed. They use a stylesheet there and in this stylesheet they use

BODY {
background-attachment: fixed;
}

So that's why I thought this should work, however I tested it, and it don't, now I'm lil' confused.....

Joseph

jbrugman

Think he does it with DHTML.
The background is placed in a layer then.

oubelkas

But the background is called horizon.jpg and is used only in the body :
<BODY BACKGROUND="images/horizon.jpg" ......

so I don't think a layer has been used.

jbrugman

what do you make of this?
I'm confused now too.

<BODY BACKGROUND="images/horizon.jpg" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onscroll="window.scroll(0,0)" onLoad="
if(is.ns4) {
available_width=innerWidth;
available_height=innerHeight;
document.onkeydown = keyDown;
document.captureEvents(Event.KEYDOWN);
choreographer('layerSetup',null);
} else if(is.ie4) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
document.onkeydown = keyDown;
choreographer('layerSetup',null);
}"
onResize="
if(is.ns4) {
available_width=innerWidth;
available_height=innerHeight;
document.onkeydown = keyDown;
document.captureEvents(Event.KEYDOWN);
if(is.ns4b) {
history.go(0);
} else {
choreographer('page_reset',null);
}
} else if(is.ie4) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
document.onkeydown = keyDown;
choreographer('page_reset',null);
}"
>

oubelkas

Yeah, this is a nasty one hunh? Not that easy, well the main point here is that he sets up the page using the function choreagrapher which is defined in guru.js. I've seen this function and it's a pretty damn big one too. But it has nothing to do with fixing the background. As I already said, the fixing is done in the stylesheet guru.css. Here it says

background-attachment: fixed;

But htmlguru.com isn't an easy page to get your info on, though very usefull for DHTML users.

brigmar

did anybody notice this...

onscroll="window.scroll(0,0)"

...in the <BODY> tag ?

This 'fixes' the background by scrolling the window back to the top whenever it is scrolled by other methods..

that, along with the style ..

"background-attachment:fixed;"

...are the keys.

Any help ??

Brian

brigmar

of course... this means that NO content can scroll, and that you have to write your own layer scrolling mechanism...

just as the htmlguru has done :)

Brian

jbrugman

brigmar is right!
The background isn't really a layer, just a HTML page that can't scroll.

The rest of the page is in layers, that scroll via his own meganism.

I think this would indead be the only solution.

Well, mscproj,

In plain text, you can't make a backround fixed in Netscape, the only way to do anything like that, is by using Layers, and the following body-tag.

<BODY BACKGROUND="yourimage.jpg" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onscroll="window.scroll(0,0)">

Then place the contents of your page in a layer, that can scroll.

jbrugman

Note that it only works in Netscape >=4 and ie >=4.

oubelkas

Haha! Well you guys, check out

http://www.htmlguru.com/magic

Here also the background is "fixed" but no onscroll="window.scroll(0,0)" is used....how can this be, very nice :-)

Joseph

jbrugman

Again ...
<BODY BACKGROUND="images/horizon.jpg" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO"

see:
SCROLL="NO"
would be able to do the trick as well...

brigmar

SCROLL="NO" is IE only.
And not even IE for the Mac.

jbrugman

Yes, but the viewable size of the screen is placed in the body -->

onLoad="
if(is.ns4) {
available_width=innerWidth;
available_height=innerHeight;
document.onkeydown = keyDown;
document.captureEvents(Event.KEYDOWN);
choreographer('layerSetup');
} else if(is.ie4) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
choreographer('layerSetup');
}"
onResize="
if(is.ns4) {
available_width=innerWidth;
available_height=innerHeight;
document.onkeydown = keyDown;
document.captureEvents(Event.KEYDOWN);
if(is.ns4b) {
history.go(0);
} else {
choreographer('page_reset',null);
}
} else if(is.ie4) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
document.onkeydown = keyDown;
choreographer('page_reset',null);
}"
>

So he was able to make his layers in such a way, there is no need to scroll.

Be serious. NN can't have a fixed background, unless you use layers.

jbrugman

Look what happens, if you resize the screen.

oubelkas

Well, jbrugman, glad you asked me that question on the PHP section. Didn't know that logan67 also had my name.

Joseph

jbrugman

hhmm, Well oublekas, i will ask a new q. shortly about it later, then you're the man.
Sorry,
I didn't read the name, just the answer.
but...
back to this topic.

Also notice that there is a new window opened.
When this is placed in a regular nn browser version with the toolbar etc.
You will notice that the background actually will scroll.

The HTML Guru is making use of some verry nice tricks, but you can't make a background non repeating in netscape without using layers.

justus

oubelkas

YEAH! I'm with Justus! :)

Joseph

chewymon

jbrugman -- I think I said that in the first comment.

jbrugman

sorry chewymon, i thought you lost your interest since you didn't participate in the discussion we had.

chewymon

Didn't have anything new to add to the discussion. This question looks like it is going to autograde anyway.

jbrugman

hmm bad thing, i see that a lot these days.
Might concider to totally stop if it happens to often :(

brigmar

from Dan Steinman's DynLayer (clipping)

http://www.dansteinman.com/dynduo/en/clipping.html

------
You can also have a background image in your layer. The CSS for IE is background-image:URL(filename.gif) and for Netscape it's layer-background-image:URL(fildname.gif). But in order for Netscape to display it properly you must have one more CSS property repeat:no. Here's the full CSS for a layer with a background images:

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-image:URL(filename.gif); layer-background-image:URL(filename.gif); repeat:no;}
------

Brian

brigmar

from Dan Steinman's DynLayer (clipping)

http://www.dansteinman.com/dynduo/en/clipping.html

------
You can also have a background image in your layer. The CSS for IE is background-image:URL(filename.gif) and for Netscape it's layer-background-image:URL(fildname.gif). But in order for Netscape to display it properly you must have one more CSS property repeat:no. Here's the full CSS for a layer with a background images:

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-image:URL(filename.gif); layer-background-image:URL(filename.gif); repeat:no;}
------

Brian

brigmar

How ironic... my post on _NOT_ repeating repeats. ;-)