Tips for Creating a Background Watermark on a Web Page

Execute the technique with CSS

Protecting images can get out of hand
Protecting images can get out of hand. © J Kyrnin licensed to About.com

If you're designing a website, you might be interested in learning how to create a fixed background image or watermark on a web page. This is a popular design treatment that has been popular online for quite some time, and which shows no signs of loosing popularity anytime soon. It is a handy effect to have in your web design bag of tricks!

If you've never created a done this before or have tried to previously without luck, the process might seem intimidating, but it's actually not very difficult at all.

With this brief tutorial, you will get the information you need to master the technique in a matter of minutes using CSS.  

Getting Started

Background images or watermarks (which are really just background images that are displayed very light) have a history in printed design. Documents have long included watermarks on them, and many flyers or brochures for businesses uses large background images as part of the design for that printed piece. Web design has long borrowed styles from print, and background images on web pages are one of these borrowed styles. These large background images are easy to create using the following three CSS style properties:

  • background-image
  • background-repeat
  • background-attachment
  • background-size

Let's Explore the CSS

You would use use background-image to define the image to use as your watermark. This style simply uses a file path to load an image that you have on your site, likely in a directory named "images" (this is the structure we are using in our example code below).

Note that the image itself should be made "light" in a graphics editor like Photoshop first, so that when you do bring it into your webpage it has that "watermark" look to it.

The background-repeat property comes next. If you want your image to be a large watermark-style graphic, you would use this property to make that image display only once.

Background-attachment is a property that many web designers forget about, but using it keeps your background image fixed in place when you use the "fixed" property. This is what turns that image into a watermark that is fixed on the page. The default value for this property is "scroll", so if you do not specify a background-attachment value, the background will scroll along with the rest of the page.

Background-size is a newer CSS property. It allows you to set the size of a background based on the viewport it is being viewed in. This is super helpful for responsive websites that will display at different sizes on different devices. Two helpful values you can use for this property include:

  • cover - scales the background so either the full width or full height is shown. This means that some parts of the image may not be shown, but the entire area will be covered
  • contain - scales so that both the entire width and height are shown in the area being styled. The image is not cut off, but the downside is that parts of the area may not be covered with image.

Adding the CSS to Your Page

After you've understand the above properties and their values, you can add the following to the HEAD of your web page (if you are making a single-page site) or add the CSS styles to an external style sheet (if you are building a multi-page site and want to take advantage of the power of an external sheet).

Change the URL to your background image to whatever you are using and whatever file path is relevant on your site, and you'll now have a watermark:

 <style>
 <!--
 body {
 background-image: url(/images/page-background.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 }
 //-->
 </style> 

Other Tips

If you want to place the watermark in a specific location on your web page (say, the middle of the page or perhaps in the lower corner, as opposed to the top corner which is default), add the background-position property to your style to place the image in the exact spot that you would like it to appear. You can use pixel values or percentages to achieve that positioning effect.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 6/5/17