Go Premium for a chance to win a PS4. Enter to Win


Positioning a background image

Posted on 2003-10-25
Medium Priority
Last Modified: 2010-04-25
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.
Question by:mtech

Expert Comment

ID: 9619887
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
                        object.pixelLeft = availWidth - layerLeft;

                  if(availHeight < layerTop)
                           object.pixelTop  = 2; // incase the available height is less than your layers height
                           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
                        object.left = availWidth - layerLeft;      
                  if(availHeight < layerTop)
                            object.top  = 2; // incase the available height is LESS than the height of your layer
                        object.top = availHeight - layerTop;

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
LVL 23

Accepted Solution

Saqib Khan earned 500 total points
ID: 9620837
Ignore the ABOVE Post, its very Complicated and requires Client Side Scripting Enabled.

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

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

  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.

Author Comment

ID: 9622077
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!

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

LVL 23

Expert Comment

by:Saqib Khan
ID: 9623932
I totally Agree:)

Expert Comment

ID: 13667307

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.


Author Comment

ID: 13689202

This question was answered 2 years ago !!

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Loops Section Overview

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question