Positioning a background image

Posted on 2003-10-25
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 =; // 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)
                    = 2; // incase the available height is LESS than the height of your layer
               = 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 (resize the window and you shall see the text jump around)

// Andhrimner
LVL 23

Accepted Solution

Saqib Khan earned 125 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!

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem with updating record and sending email 3 215
Read More links 12 355
Multi Step Form using jQuery 11 943
Add server behaviors to Dreamweaver CC 2015 2 156
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
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…
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…

776 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