Positioning a background image

I have an image that I need to position so that it becomes a background watermark image on my page. It needs to be in the background so that anything else on the page is in front of it, but, I need this to always be in the botom right corner of the page regardless of what size window the page is viewed in or how wide or long it is.

The page has a table that is 100% wide but I don't think I can position a background image in a table in this way. I suspect this needs some form of dynamic positioning and maybe put in a layer. I would appreciate some help and advice on this.
mtech
LVL 1
mtechAsked:
Who is Participating?
 
Saqib KhanSenior DeveloperCommented:
Ignore the ABOVE Post, its very Complicated and requires Client Side Scripting Enabled.

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="styles.css">
</head>
<body>
</body>
</html>

Now, create a textfile in the same directory called styles.css and put this in it :

BODY {
  background: white url("test.gif");
  background-repeat: no-repeat;
  background-position: bottom right;
}

Now, change background to the color you desire, and test.gif to the image you desire.

This should do the trick, very simple actually.
0
 
AndhrimnerCommented:
Well this is a code that i am using to place an layer on a proper place, tested it with IE 6.0 and Mozilla Firebird 0.6.1.

First of all, you need to put this JS code into your HEAD tag (if using DW just press F10 and go to the beginning of that window, and look for the word <HEAD> and </HEAD> and place this between those)

<script language="JavaScript">
<!--
function setWaterstampLayer() {
       var object;
      var layerLeft = 200; // change this to the real width of your layer
      var layerTop = 200; // change this to the real heightn of your layer
   
      if(document.all) { // this part of the code will be used if the browser is Internet Explorer
            var availWidth = document.body.offsetWidth; // get the browser windows current width
          var availHeight = document.body.offsetHeight; // get the browser windows current height.

            object = document.all.waterstamp.style; // this is used to define what layer you are working with, feel free to replace "watermark"    
                                                                           // with whatever layer you want to change the position on
            
                if(object) { // if the object really exist, then we try to change the position of it
                  if(availWidth < layerLeft)
                        object.pixelLeft = 2; // incase the available width is less than your layers height
                  else
                        object.pixelLeft = availWidth - layerLeft;

                  if(availHeight < layerTop)
                           object.pixelTop  = 2; // incase the available height is less than your layers height
                  else
                           object.pixelTop  = availHeight - layerTop;
            }
      }else if(document.getElementById) { // this part is used if the browser can handle W3C DOM (this is the part that new netscape is using
                                                             // by the way)

            var availWidth = document.body.clientWidth; // get the current width of your browser window
              var availHeight = document.body.clientHeight;      // get the current height of you browser window

            object = document.getElementById('waterstamp').style; // this us used to define the layer that you are going to change position on
                                                                                                 // feel free to replace "watermark" with the layer you want to move around
                                                                                                 // also, dont forget the single quetes ( ' )  around the layername
 
               if(object) { // if the object exist, then try to move it around
                  if(availWidth < layerLeft)
                        object.left = 2; // incase the available width is LESS thann the width of your layer
                  else
                        object.left = availWidth - layerLeft;      
                  
                  if(availHeight < layerTop)
                            object.top  = 2; // incase the available height is LESS than the height of your layer
                  else
                        object.top = availHeight - layerTop;
            }
      }      
}
//-->
</script>

And then to load this script when you need it, then you need to call it in two different situations.
1. When your browser first load the page
2. When the user changes the width and height of the window (like maximize and unmaximize).
and to do this the easy way, simply put these two things in your BODY tag
   
   onLoad="JavaScript:setWaterstampLayer()" onresize="JavaScript:setWaterstampLayer()"

so for example your body tag might look like this afterwards:

   <body onLoad="JavaScript:setWaterstampLayer()" onresize="JavaScript:setWaterstampLayer()">

And finally, you need an layer that you are going to place in the bottom right corner, place this code inside your body tag (between <BODY>and </BODY>)

     <div id="waterstamp" style="position:absolute; width:200px; height:200px; z-index:1; left: 34px; top: 43px;">Here i am</div>

Also, if you always want this layer to be below all other layers, then the option to look at here is the "z-index" which should be set _lower_ than the others (ex. z-index 1 is below z-index 2 etc.)

There, if there is any questions about this whole thing, let me know so shall i try to explain it better. The hard part is to know how detailed you should be when trying to be "cool" and answering things.

Also threw up this example as a real page on http://lightstar.dyndns.org/waterstamp.htm (resize the window and you shall see the text jump around)

// Andhrimner
0
 
mtechAuthor Commented:
adilkhan
Thanks - there was something in the back of my mind that was telling me I could do this easily and I had once used it before!

Still its like they say, its not what you know but what you can remember thats important!

mtech
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Saqib KhanSenior DeveloperCommented:
I totally Agree:)
0
 
msap7222Commented:

hi adilkhan

is there also a posibilty to position the background-image with margins, using CSS? I want to give my table this glow effect on the sides. So I'v made a gradient background image. if I want it to position just like the table in the center and then with a left-margin of 18px (for scrollbar), how do I do that.
So position my background-image 18px to the left from the center.

Thanks
0
 
mtechAuthor Commented:
msap7222

This question was answered 2 years ago !!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.