Any easy way to add a "watermark" IMG (not a bg) to an existing page?

[contractor]

I have a complex pre-existing page that has plenty of tedious pre-existing DIVs. I am hoping to not have to spend a lot of time (many days) analyzing CSS code in order to add a single background IMG that will serve as a watermark for this page's banner area (i.e., all the existing text in all the existing DIVs should float on top of this new IMG).

NOTE: I am NOT talking about adding a background image URL - I am talking about adding an IMG element to the page's banner area that will serve as a watermark for the banner area.

I have identified the banner area that will house this "watermark IMG": it is a DIV with several nested DIVs inside of it. I am hoping that there is some quick-and-dirty way that I can add my "watermark IMG" to this banner area DIV 1.) without disturbing the existing page elements, and 2.) without having to tediously review and change all the existing 'floats' and 'absolutes' and 'clears' and whatever.

Is there any simple way that I can add a background "watermark IMG" (that is not a background URL) without painstakingly reviewing every DIV that already exists? I just know that if I have to do the latter I will EASILY spend days and I still may never get the page to look right anyway.

Anyone have any suggestions?

[alt131]

Hi contractor and welcome to WebmasterWorld,

Not sure why you cannot use a background-image, and adding an image is going to disturb the existing elements to some extent.

One option is to absolutely position the "watermark img" inside the "banner area div" and give the image a z-index that will keep it below the other "content" that you want stacked on top.

If it doesn't break the existing layout, ideally set position:relative on the "banner area div" as then the image will take its top/left from the top/left of the "banner area div" rather than the viewport, which makes it easier to get the image in the correct place.

[Major_Payne]

Watermarks should be added to the images directly and number registered. If you truly are trying to protect your images, then watermarking in the way you want to do it will not do. Too many web developer tools that are browser plug-ins will pluck all those images right off your page and include all URLs to each un-watermarked image.

Thumbnails and low-res web ready images are the best to use. Showing an original image online should include the watermark on a hi-res copy of the original. Originals should NEVER be put online if you worry about people stealing them because they will and can. Even with Google's warning that some images it pulls may be copyrighted, that is not enough protection.

I spend a lot of time answering questions on Yahoo!Answers and people have no concept about copyright or trademarks. They go for music, other web site layouts they like, images and more without one thought to the legalities of their actions.

[contractor]

Thanks alt131. Your comment prompted me to revisit my use of a background image.

I had had issues with that earlier because some of DIVs were floating in relation to the background image (which I did not want to happen) so I changed those DIVs to 'position:absolute' and now I can reliably use the background image.

And thanks to the comment regarding watermarks, but I was using the term to describe my background image effect and not in regards to how you're describing them. Sorry for the ambiguity.

[Major_Payne]

And thanks to the comment regarding watermarks, but I was using the term to describe my background image effect and not in regards to how you're describing them. Sorry for the ambiguity.

LOL No problem. Not the first time I mis-understood something. So many definitions of watermarks [en.wikipedia.org]: (Digital watermarking [en.wikipedia.org]) | (How to Watermark a Photo [ehow.com]).

At 68, confusion reigns in my head. LOL