Is it possible to have a watermark on a web page?

[peteyb]

Is it possible to have a watermark on a web page?

I need a design/image to sit in the backround that will allow for me to create tables unhindered over the top of it.

is this possible?, and if so how?

[WebJoel]

<style>
body {color:rgb(0,0,0); background:#ffffff url(your_image.gif) no-repeat fixed center;}
</style>

Here, a white background is created, black text, and a semi-transparent image "your_image.gif" is positioned with no repeat, fixed and center.

This should put the image your_image.gif static (stationary) in the middle of the browser window, acting as a 'watermark'. Being "fixed", it will stay in place even if you scroll the page.

Using your_image.gif, be sure to make the image fairly semi-transparent, or else it will conceal your text of the HTML document.

To see this is effect, here is an older page I wrote a few years ago that uses this effect:

http://ca.geocities.com/troublewp3/

[peteyb]

the image only appears inside my table and not in the background?

[peteyb]

there was a contradiction in my css, have got it working with:

body {
color:rgb(0,0,0);
background:#00ff99 url(grass.jpg) no-repeat fixed center;
margin: 5%
}

How can i make the image takeup 100% of the users screen?

[WebJoel]

I don't think that there's any realistic way to 'stretch' a specific-sized image to flood a visitor's entire background. One can 'fake it' with edges and expanding background gradients with a bona~fide image floating in the middle though...

When this is applied in CSS to the "body {}" part, it is entirely 'behind' everything else that will be on the page. -Is this not what you wanted? But you can do the same for indvidual tables or DIV's too.
If a <div id="this_box"></div>, the style might look something like:

<style>
#this_box {width:300px; height:300px; background:#00ff99 url(grass.jpg) no-repeat fixed center;}
</style>

And you've got a 300px by 300px 'box' with "grass.jpg" fixed & center only inside of that DIV. Being "fixed", if you added scrolling, the image would still remain 'unmoving' inside of that 300px by 300px prison... (but the DIV "this_box" would scroll normally with the page).
Make the id "this_box" be a "class" instead, you could apply this to multiple DIVs and acheive multiple instances of same result.

Kewl, huh?!

But what improvement does adding "margin:5%;" do to your page? Have you tried manually re-sizing the browser, or emulating to a smaller screen-size? A 'percentage' margin or border can be a tricky thing.
In my ferret webpage, I used "background:#000000 url(image.jpg) no-repeat fixed center right;" and the image is to the right-of-center, but not completely against the right-hand edge of the window. Unless that is in error, it seems to have worked.

[peteyb]

im running with a template design, thanks for your help anyway tho