We help IT Professionals succeed at work.

background-position in Netscape 4.7

Hamilton
Hamilton asked
on
Hi!
I have tried the following HTML-Code

<html>
<head>
</head>
<style type="text/css">
body { background-image: url(test.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
</style>
<body>
</body>
</html>

but the "background-position" attribut has not shown any effect. Everything I have written there (right, middle, ...) did not change anything. I think the attribut is simply ignored. Do you have any suggestions?
Regards, Hamilton
Comment
Watch Question

hi check this code

<html>
<head>
</head>
<style type="text/css">
body { background-image: url(1.gif); background-repeat: no-repeat; background-position:top left; background-attachment:
fixed; }
</style>
<body>
</body>
</html>
-------------------
actual parameters of background position are

background-position : [percentage|length] {1,2}|
 [top|center|bottm] || [left| center|right]

Author

Commented:
Sorry, this does not work either. The background image is not yet centered horizontally and vertically.
Top Expert 2013

Commented:
<HTML>
<HEAD>
   <TITLE> Fixed background using styles <TITLE>
<STYLE TYPE="text/css">
   BODY { background-repeat:no-repeat;background-attachment:fixed;
          background-position:center center;background-image:url(blah.jpg) }
</STYLE>
</HEAD>
<BODY>
etc...

And it does not work in Netscrap 4.x, because the attributes are not supported.

Cd&

Author

Commented:
But it is said that these attributes are absolutely standard! :o)
Additionally, I think it has to be "center middle", hasn't it?
Regards, Hamilton

Commented:
CSS lvl 1 has been a W3C recommendation since late in 1996.  That does not, however, mean that Netscape 4.x has good support for it, and this is a well known fact (even though it's a sad one).

Have a look at http://www.webreview.com/style/css1/charts/mastergrid.shtml and you'll notice that is marked with a "N" for NN4.x.  You can also test the browser support for the various background properties with W3C's CSS Test Suite: http://www.w3.org/Style/CSS/Test/current/sec536.htm
Top Expert 2013

Commented:
And it IS center center.  There is no such attribute value a middle in CSS1, CSS2, or CSS3.  

Cd&

Author

Commented:
Thanks to everybody here ... :-)
Who should get the points?
Top Expert 2013
Commented:
Well you were looking for a solution for Netscrap.  Instead of styles doing the job let's try this to see if it is more helpful. It puts the image in a layer and centers based on resolution
at load time. Just put your own image in the div:

<HTML>
<HEAD>
<title> centered background </title>
<STYLE TYPE="text/css">
   #bgID { position:absolute;top:1;left:1;z-index:-1 }
</STYLE>
<script language="JavaScript">
<!--
   function initBG()
   {
      var W= window.screen.width;
      var H= window.screen.height;
      var IE = (document.all) ? true : false;
      var NS4 = (document.layers) ? true : false;
      var NS6 = (document.getElementById && !document.all) ? true : false;
      if (IE)
      {
         document.all["bgID"].style.top=(H - document.all["bgID"].clientHeight)/2;
         document.all["bgID"].style.left=(W - document.all["bgID"].clientWidth)/2;
      }
      else
      {
         if (NS4)
         {
            document.layers["bgID"].top=(H - document.layers["bgID"].document.height)/2;
            document.layers["bgID"].left=(H - document.layers["bgID"].document.width)/2;
         }
         else
         {
            document.getElementById("bgID").style.top=(H - document.getElementById("bgID").offsetHeight)/2;
            document.getElementById("bgID").style.left=(W - document.getElementById ("bgID").offsetWidth)/2;
         }
      }
   }
//-->
</script>
</HEAD>
<BODY onLoad="initBG()">
<BR><BR>
<h2 align="center">Try This</h2>
<p align="left">
It puts the image in a layer and centers based on resolution<br>
at load time. Just put your own image in the div:<br><br>
additional contents the page...<br><br>
That is based on raw resolution and assumes full screen.<br>
Adjustment offsets can be applied to allow for chrome.<br>
Let me know.<br>
</p>
<div align="center" style="width:300">
<span style="font-family:arial;font-size:20pt">Cd&</span>
</div>  
<DIV ID="bgID">
   <IMG SRC="wooden.gif">
</DIV>
</BODY>  
</HTML>


That just deals with the raw resolution for positioning, but, but it might be better than nothing.

Cd&

Commented:
I suggest using:

var W = document.layers ? document.body.width : document.body.offsetWidth;
var H = document.layers ? document.body.height : document.body.offsetHeight;

instead.  screen resolution doesn't always equal browser window size, particularly not the size of the actual document (which is what you want to base the image centering on).
Top Expert 2013

Commented:
Glad we could help.  Thanks for the A.

Cd&

Explore More ContentExplore courses, solutions, and other research materials related to this topic.