RESOURCES :: Mini Tutorials:: Page Margins and page backgrounds using CSS

This started out as a bit of advice for a forum poster who wasn't sure how or whether to implement a gradient image as a page or table background. I thought I would expand on the idea to include page margins.

You need to set margin and padding properties to 0 to remove the default margins of your page.

Implementing various css techiques we can vary how an image can be used as a page background.

Using an image as a background for your pages:

I used Fireworks to design the gradient image you see above. I started with an image 1030px x 20px. (This is what you see below). This was used for the vertical repeat demo, however for the horizontal repeat demo, I increased the height of the image to 100px so that it sat 100px down from the edge of the window. Change the graphic size to suite your layout.

It is a simple rectangle with a linear gradient using colors #A5ACE2 to #660000. I also changed the opacity setting for the purple colour. The graphic was exported as a jpg.

We have also added a margin declaration to our stylesheet so that the image sits 'flush' with the browser window and does not show the default browser margins.

Use in your stylesheet:

To get completely valid code that works for all browsers in any version of DW, use the following in your stylesheet.

body {
padding: 0px;
margin: 0px;
background: url(pics/bckgroundhor.jpg); /*the path to your image*/
background-repeat: repeat-x;
background-color: White;
}

Use this in your document head:

If you prefer to add this to your document, copy and paste the following into the head of your document:

<style type="text/css">
<!--
body {
padding: 0;
margin:0px;
background: url(pics/bckgroundhor.jpg); /*the path to your image*/
background-repeat: repeat-x;
background-color: White;
}
-->
</style>

By changing the background-repeat declaration, we can have the background running horizontally or vertically on a page.

Example of fixed background image-----> (background-attachment: fixed)

Example of a gradient image repeating across the page -----> (background-repeat: repeat-x)

Example of a shadow effect background repeating down the page -----> (background-repeat: repeat-y)

Tutorial home >>