Google Answers Logo
View Question
 
Q: Adding watermarks to a html page already using a tiled background image ( Answered 5 out of 5 stars,   0 Comments )
Question  
Subject: Adding watermarks to a html page already using a tiled background image
Category: Computers > Internet
Asked by: richardjmoss-ga
List Price: $10.00		 Posted: 24 Jun 2004 08:09 PDT
Expires: 24 Jul 2004 08:09 PDT
Question ID: 365606 
Hello,

I'm trying to add a graphic to the bottom right hand corner of a web
page as a watermark, so that it appears behind all imaginable
elements, and appears always visible in the corner of the visible
area.

Normally, I would use the background attributes of a .css file to
display the watermark, but in the past I always had a blank
background. This time around I have an image tiled in the background,
and it doesn't appear to be possible to have two sets - if the
watermark is displayed, the tiled background is not.

I've tried playing around with an img tag and positioning tags, but am
having zero success with this.

I've done a search but aren't getting anywhere as I guess my search
terms are too generic.

Any advice you can offer to aid me in this would appreciated.
Clarification of Question by richardjmoss-ga on 24 Jun 2004 08:12 PDT 
"and appears always visible in the corner of the visible
area"

With that bit of odd phrasing, I meant that the image should always
appear in the bottom right hand corner of the visible onscreen
document area, even if the document itself is longer than this and
scrolls off vertically.
Answer  
Subject: Re: Adding watermarks to a html page already using a tiled background image
Answered By: palitoy-ga on 24 Jun 2004 09:09 PDT
Rated:5 out of 5 stars		  
Hello Richardjmoss,

I believe the solution to your problem would be to use a <div> tag to
enclose your content.

By this I mean you should continue to use your current .css code to
display the watermark on the background of the page.  You can then
place everything that you would normally put in your <body> tag with
the background in a <div> tag - simply place <div> after the <body>
tag and </div> before the </body> tag.  You can then use a little css
code to put a background to the <div>.

I am conscious that this is very hard to explain so I will give you a
small example below for you to follow.  pagewatermark.png and
divwatermark.png would be the background images for each element and
you should note that the pagewatermark.png *AND* divwatermark.png are
displayed which they are not with your current solution.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
body {
	background-image: url(pagewatermark.png);
	background-repeat: repeat-y;
	background-position: right bottom;
}
div {
	background-image: url(divwatermark.png);
	width: 100%;
}
-->
</style>
</head>
<body>
<div>This is where your page content goes.</div>
</body>
</html>

If you have any further questions on this subject please ask for
clarification and I will do all I can to help.
Request for Answer Clarification by richardjmoss-ga on 25 Jun 2004 01:31 PDT 
Hello,

Thank you for the prompt response. I gave this a try and it does work,
although I find the watermark is cut off if the body area is too small
(the graphic is quite tall). I'm assuming it's not possible to make
the image bypass the boundaries of the div are drawn itself fully?

Thank you;
Clarification of Answer by palitoy-ga on 25 Jun 2004 02:25 PDT 
I am not sure I understand you clarification.  Do you mean that the
watermark of the <div> is cut off?  If this is the case you can use
css to alter the size of the <div> so that it is a multiple of the
height of your image.  I believe the only way to bypass the boundaries
of the <div> is to give the <div> a padding as you would a table
column or row.

The other solution to this problem is of course to use a <table> to
enclose your page content but this will have the same problems as the
<div>.
Request for Answer Clarification by richardjmoss-ga on 25 Jun 2004 02:50 PDT 
Sorry, yes, I did mean that the watermark in the <div> was being
chopped off if the body content was too small, which is to be
expected. At least I can work around it now that I have both images in
the page!

Thank you very much for you answers, definitely appreciated.
Clarification of Answer by palitoy-ga on 25 Jun 2004 03:55 PDT 
Thanks for the 5-star rating, I'm glad I could be off help.

For the sizing of the <div> in css you could use something like this:

div {
	background-image: url(wallpaper.png);
	height: 200px;
	width: 100px;
	padding: 20px;
}

Good luck with your page!
richardjmoss-ga rated this answer:5 out of 5 stars 
Prompt and courteous responses, and provided a viable solution to a
problem which had me stumped.

Comments  
There are no comments at this time.
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy