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 common design treatment that has been popular online for quite some time. It is a handy effect to have in your web design bag of tricks.

If you have not done this before or have tried it 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 very light background images) have a history in printed design. Documents have long included watermarks on them to prevent them from being copied. Additionally, many flyers and brochures use large background images as part of the design for the printed piece. Web design has long borrowed styles from print and background images 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

Background-Image

You will use background-image to define the image that will be used 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."

background-image: url(/images/page-background.jpg);

It's important that the image itself is lighter or more transparent than a normal image. This will create that "watermark" look in which a semi-transparent image lies behind the text, graphics, and other main elements of the web page. Without this step, the background image will compete with the information on your page and make it difficult to read.

You can adjust the background image in any editing program such as Adobe Photoshop.

Background-Repeat

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 displays only once. 

background-repeat: no-repeat;

Without the "no-repeat" property, the default is that the image will repeat over and over again on the page. This is undesirable in most modern web page designs, so this style should be considered essential in your CSS.

Background-Attachment

Background-attachment is a property that many web designers forget about. Using it keeps your background image fixed in place when you use the "fixed" property. It is what turns that image into a watermark that is fixed on the page.

The default value for this property is "scroll." If you do not specify a background-attachment value, the background will scroll along with the rest of the page.

background-attachment: fixed;

Background-Size

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 very helpful for responsive websites that will display at different sizes on different devices.

background-size: cover;

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 appear on screen but that the entire area will be covered.
  • contain - Scales the image so 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 by the image.

Adding the CSS to Your Page

After you understand the above properties and their values, you can add these styles to your website.

Add the following to the HEAD of your web page if you are making a single-page site. Add it to the CSS styles of an external style sheet if you are building a multi-page site and want to take advantage of the power of an external sheet.

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

Change the URL of your background image to match the specific filename and file path that is relevant to your site. Make any other appropriate changes to fit your design as well and you'll have a watermark. 

You Can Specify Position, Too

If you want to place the watermark in a specific location on your web page, you can do that as well. For example, you may want the watermark in the middle of the page or perhaps in the lower corner, as opposed to the top corner, which is the default.

To do this, add the background-position property to your style. This will place the image in the exact spot that you would like it to appear. You can use pixel values, percentages, or alignments to achieve that positioning effect.

background-position: center;

Edited by Jeremy Girard