View Full Version : CSS watermark

Grant Palin
10-26-2002, 04:30 AM
How do you create a watermark background using CSS? I've seen it done, though I don't remember where. I mean, it's a light-colored background image that doesn't tile, remains fixed, and merges neatly with a set background color.

10-26-2002, 05:23 AM

Grant Palin
10-26-2002, 06:03 AM
Thanks, but I figured it out using just CSS.

10-26-2002, 07:45 AM
Thats the reason i gave you the link

you can take
url('notebook.jpg') white center no-repeat fixed
out of that script and use it in CSS

Grant Palin
10-26-2002, 05:38 PM
Hmmm...I didn't know that. I don't know DHTML, so I couldn't remove any of the script while being sure it would still work. By the way, what does the rest of the script DO? What's the point?

10-27-2002, 04:16 AM
things like
if (document.all
will display the watermark only if the page is being viewed in internet explorer, and something i just learned, opera as well :(

Grant Palin
10-27-2002, 04:52 AM
So, like I asked, is it important? Does it really have to be there?

10-27-2002, 06:20 AM
yes, it should be in javascript with the browser recognition.
in simple CSS it could cause problems with other browsers, however if you know the site will be viewed only in say IE then it can be used in just CSS

Grant Palin
10-27-2002, 06:44 AM
Why would it only work in Internet Explorer if it was just CSS?

10-27-2002, 07:03 AM
there is plenty of CSS that will only work in IE, that browser will use just about anything you type. hehe
another example would be maybe (overflow:hidden)
and user colored scrollbars
i cant think of any tutorial websites that may help you understand more.
but here are a few off the top of my head that could have some information on further questions.


Grant Palin
10-27-2002, 08:37 PM
So I guess I'll have to put that bit of code into every one of my pages then...Sigh...

10-27-2002, 09:23 PM

both background, and overflow, are standard, and not IE proprietary.

Grant, i'm not really sure why that snippet of code exists at all. supposedly, it would make the css fail gracefully in browsers that don't support it. except that css does that anyway, without the help of javascript.

a good resource to see what works where is : http://www.xs4all.nl/~ppk/css2tests/intro.html

Grant Palin
10-27-2002, 11:15 PM
So, I don't need to worry about that at all then?

10-27-2002, 11:49 PM
no, you shouldn't need to worry about it.

Grant Palin
10-28-2002, 12:06 AM
Phew! You've just saved me a lot of work- I have almost 50 pages in my site, and it would have been a hassle to have to add that javascript to every one of my pages. Thanks a lot!

10-28-2002, 12:29 AM
without the javascript i got errors in opera

10-28-2002, 01:32 AM
you got errors, or it just didn't work?

Grant Palin
10-28-2002, 02:22 AM
Please visit my site and tell me how it looks with the static watermark, and whether it works or not.


10-28-2002, 05:04 AM
working fine for me in opera 6.05, IE6 SP1, and Moz 1.1 in NS4, it shows up, but it's up in the corner, and it scrolls. to see how you might fix that, check this out: http://www.evolt.org/article/Assigning_browser_specific_styles/17/14732/index.html

10-28-2002, 05:26 AM
without javascript (opera 6.05 )
i got an error, it was confusing the browser i think, something about printing the page, and i rechecked, every time i opened it, it happened.

btw neat site Grant Palin

Grant Palin
10-28-2002, 06:37 AM
Thanks for that link, joh6nn. That was interesting. What you're saying is I should set aside a portion of the stylesheet specifically for Netscape browsers, and change the settings accordingly? Is that it?

cg9com- you got an error whenever visiting my page? What was the error? And thanks for the compliment!

10-28-2002, 06:54 AM
grant, the technique laid out in that article ( assuming i linked to the right one ) is more or less setting up two style sheets. NS4 doesn't understand the @import rule for style sheets, while almost every other browser does. so, it will skip over that rule, and use the first style sheet, and all the other browsers will use the second style sheet.

Grant Palin
10-29-2002, 03:28 AM
So, generally speaking, what I should do is create a second style sheet, linked from the first, containing all the "regular" CSS. The first style sheet should contain the Netscape-specific styles. If using some other browser than Netscape, the second sheet overrides the first. How am I doing?

10-29-2002, 03:50 AM
Originally posted by Grant Palin
cg9com- you got an error whenever visiting my page? What was the error? And thanks for the compliment!

No i got an error when i loaded a local .html file i made, and opened with opera.

Your welcome :)

Grant Palin
10-29-2002, 06:28 AM
Whew! You had me going for a minute there!