Solved

Positioning a background image

Posted on 2003-10-25
6
223 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
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:
adilkhan 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 23

Expert Comment

by:adilkhan
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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 …
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…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now