Solved

Positioning a background image

Posted on 2003-10-25
6
229 Views
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.
mtech
0
Comment
Question by:mtech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 

Expert Comment

by:Andhrimner
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
                  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
 
LVL 23

Accepted Solution

by:
Saqib Khan earned 125 total points
ID: 9620837
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
 
LVL 1

Author Comment

by:mtech
ID: 9622077
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 23

Expert Comment

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

Expert Comment

by:msap7222
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.

Thanks
0
 
LVL 1

Author Comment

by:mtech
ID: 13689202
msap7222

This question was answered 2 years ago !!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…

632 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