Background image help

[pcwa]

I'm using Dreamweaver CS4 to build a site for my business. I want to place an image in the background of a couple pages. I want the image to be almost transparent so that I can have text over it. I have no idea how to do this. Any help would be appreciated. Thanks

[jlhaslip]

First, do you have the semi-transparent image?

body {
    background-color: #dfffdf;
    background-image: url('images/opac_logo.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 75%;
    font: 0.85em Arial,Helvetica,Verdana, sans-serif, serif;
    min-height: 100.1%;
    }

 

http://mlafever.jlhaslip.trap17.com

 

Check that site.

[pcwa]

I have the image. It's not semi-transparent yet, but I'll figure it out. When I try to put the image in the background, it doesn't go on the main content area of the page - only on the borders. I like the way your site is, and that's similar to what I'm after.

[pcwa]

I just figured it, but now it is on every page on my site. Do you know what I'm doing wrong? Thanks

[jlhaslip]

I just realized that you want that image on only certain pages of your site.

To do that, you will need to somehow modify the pages so the CSS changes for those pages.

Add the CSS code to a new CSS file and then add the new CSS file to those pages you want the background image on.

Do not serve the new CSS file to the pages that you do not want the image on.

 

Server side scripting might make it easier. Do you know php? If so, build an array of pages you want the image on and serve the new CSS file to only those pages.

 

*edit*

 

Unless Dreamweaver can do that somehow??? I don't do Dreamweaver.

Edited April 2, 2009 by jlhaslip

[Wickham]

Add the CSS code to a new CSS file and then add the new CSS file to those pages you want the background image on.

Do not serve the new CSS file to the pages that you do not want the image on.

 

Minor additional advice:-

 

Add the CSS code to a new CSS file and then add the new CSS file to those pages you want the background image on. Add the additional stylesheet link AFTER the main stylesheet link as the last one processed takes precedence.

[pcwa]

Thanks for the help. You're both rock stars.

[LSW]

Check the page size... pages traditionally should not be over 50kb in size. using a single image for the background usually requires a large image that itself is over that size.

 

Also have others test the page for you to ensure that the differences in color and light and dark does not make the content hard to read, other wise you defeat the purpose of the site.

 

Lastly check the site at different resolutions... solid image backgrounds can make the site look stupid or unuseable depending on the resolution views vs the resolution it was built for.