|
How to create a non-moving wallpaper
for your webpage
|
A popular design element in web pages is a fixed
background image (wallpaper). This is also referred to as a "non-moving
background" or "static wallpaper". This TechNote
will show how to take an existing image and use it as a fixed background
image in a web document. This effect relies upon Cascading Style
Sheets (CSS). Although the steps below describe using the Design
View of Dreamweaver MX, the actual CSS code created for this effect
is also presented at the end of the tutorial.
Creating the effect
- Open the CSS Styles window (Window > CSS
Styles).
- Click on the New CSS Style button.
- In the New CSS Style window, in the Selector
Type radio group, select Tag (redefines the look of a specific
tag).
- From the Tag pop-up menu, select body.
- For Define In, select This document only.
- In the CSS Style Definition for body dialog,
select the Background category.
- Browse for your background image, then set the
following options:
- Repeat: No-repeat
- Attachment: fixed
- Horizontal Position: center
- Vertical Position: center
Note: Clicking Help in the CSS Style definition dialog box
will display more information on what the individual options
mean, and how to further customize them to meet your own design
needs.
It should now look like this:
- Click OK. The effect will not be visible within
Dreamweaver's document window with these settings, although different
settings will allow Dreamweaver to display the image. Preview
in the browser to verify the image is centered and fixed.
The CSS code that is inserted into the <head> section of
your page looks like this:
<style type="text/css">
<!--
body {
background-attachment: fixed;
background-image: url(wallpaper.gif);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style> |
|
|
Back
to Dreamweaver Tutorials Main Page
|
|
Dreamweaver Tutorials
|
Logo
Design | Photoshop Tutorials | Dreamweaver
Tutorials | Non GMO Canola
© 2000-2004
IceHouse Designs, Inc. View Privacy Statement.
|
About | 
Links 
