The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Page Fixed Background

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Try This Demo ...

This tutorial explains how you can apply a fixed background to your web pages, to get a very cool effect. The Styles used are cross-browser compatible which means that the effect will work in a wide range of modern browsers. A complete CSS example is provided to ensure that applying the effect is a snap, even for beginners and the only thing that you have to provide is your own choice of background image.

To create a good effect, you need to use a background image that has definite markings on it so that users can see the effect properly but the background markings and color must not be so dominant that your users do not feel comfortable viewing the content of your page. The effect is probably intended for use with photographic images but it works very well with any tiled background that has fixed markings.

If you promise not to laugh too roundly at my attempt to create a watermarked background then you can try this little demonstration. If you are using a Microsoft v4+ browser or a Netscape v5+ browser then use your browser's sidebars to scroll this page up and down, and see the background remain in place while the rest of the page content scrolls normally. If you are not using a supporting browser then I'm afraid you won't see this really cool effect and the background will scroll in harmony with the rest of the page content.

Method 1: The HTML Way ...

Although it works in Microsoft browsers this method is now depreciated ...

In Microsoft browsers only, you can create this novel effect by including one attribute in the HTML body tag on each of your web pages. If we remember that web browsers simply ignore tags or attributes that they don't recognise then you will realise that the inclusion of this attribute will not do any harm in your cross-browser scripts. Users with non-supporting browsers just won't see the effect, the background will scroll with the page content. If using this method then do not forget to include the BACKGROUND attribute and make sure that it points to your own page background image.

example HTML body tag Markup ...

<body background="www-back.jpg" bgProperties="fixed" etc. ..... >

Method 2: The CSS Way ...

A far better way of creating the identical effect in supporting browsers is to use CSS (Cascading Style Sheets). Simply copy/paste the following CSS code into the HEAD section of your web page and that should do the trick. Remember that you have to point the background-image url to your own page background image. This method is supported by W3C (World Wide Web Consortium) and not only works in Microsoft browsers but also in most modern browsers including Firefox, Mozilla, Opera and Netscape.

example CSS body style ...

<style type="text/css">

body {


Conclusions ...

Try experimenting with different tiled backgrounds on a full size page, and you might also try experimenting with a photographic image in a remote window, created to fit your photograph exactly. Make sure to change your text colour and weight to contrast successfully with your selected background. You might also try experimenting with the JavaScript scroll, scrollBy and scrollTo functions, to create an automatically scrolling story board against a fixed background in your remote window.

This Background ...

Remembering that we have different color schemes to accommodate, you might be interested in understanding how I created the six backgrounds for this demonstration page. There are almost certainly better ways of achieving this effect and this could include embossing or 'raising' the image but I am going to describe the creation of the 'flat' image that we used here.

Original Crown Image

I started by finding and downloading the adjoining graphic using 'Google Images'. I then used Adobe Photoshop to complete the transformation to a fixed background image although there are other bit-image graphics programs that could be used to accomplish a similar end result. Whilst in RGB mode I resized the image to the size you see it in the background and then converted the image from RGB to web colours which made it easy to remove the white background and leave a transparent crown.

I then converted the image back to RGB mode and desaturated the image to remove all the colors and this left a grayscale type image which I then lightened considerably and it was this image that I used as the 'master' to create the six backgrounds.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Web Page Fixed Background Learn how you can apply a fixed background to your web pages to get a very cool effect indeed. The Styles are cross-browser compatible which means that the effect will work in most modern browsers.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
Post your link NOW!
Fixed Background Links
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England