PDA

View Full Version : Background image help


gank
02-01-2010, 06:06 PM
working in CS4, I wish to have 3 of my pages have different background images (as in the background between the header and footer, not the BG of the entire page). Every time I try, the new background image ends up replacing the other background image on every page. I've done this before but I can't recall how I did it. Any help would be greatly appreciated.

Corrosive
02-01-2010, 06:09 PM
Set a page specific CSS style (between the head tags) that places the background image as a background to a div (container/wrapper maybe?)

gentleone
02-01-2010, 06:21 PM
The easiest way is to define the CSS for the background image on the page itself and not in your external stylesheet.

But if you really want to have all the styles in an external stylesheet then you can give the body tag an ID. Lets say 3 pages: home, about, contact.

Example markup for your home page:

<body id="home">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>


You do the same for the pages about and contact.

In your external CSS the following:

#home #content {background: url(images/home-bg)}
#about #content {background: url(images/about-bg)}
#contact #content {background: url(images/contact-bg)}

gank
02-05-2010, 04:25 PM
thanks for the responses, I appreciate them.
How would this be done in "design view"? I'm just learning code and feel more comfortable right now working in design view

gentleone
02-05-2010, 04:45 PM
thanks for the responses, I appreciate them.
How would this be done in "design view"? I'm just learning code and feel more comfortable right now working in design view

You can't! You have to get your hands dirty. ;)

Ricky55
02-05-2010, 04:48 PM
get using code view, it won't bite...

Its actually easier than messing about in Design View. The sooner you get used to looking and working with code the easier you'll find things. HTML is simple once you get used to it. Its just a series of tags.

To do it in design view, firstly insert a new Div, then use the ID's provided above, then create a new CSS style from CSS panel, type in the selectors given above (#home #content) and then find the background section and tell DW where your images are.

Or you could you just copy and paste the code provided by the guys above.

gentleone
02-05-2010, 04:56 PM
after my answer i did a search how to give the body tag an ID in design view, but no luck unless Ricky55 knows how to :). Otherwise you'll have to this one in code view.

DWcourse
02-05-2010, 05:28 PM
In design view, you can click on the <body> tag in the Status Bar (bottom left of the Document Window) and then in the Properties Inspector fill in an ID.

gentleone
02-05-2010, 05:37 PM
In design view, you can click on the <body> tag in the Status Bar (bottom left of the Document Window) and then in the Properties Inspector fill in an ID.

Okay... I'll take my post back... You can do it all in design view :)
BUT... it can do no harm if you work in split view, so that you can see what happens on the background and try to understand what happens there and if you don't understand... come back here and ask ;)

DWcourse
02-05-2010, 05:47 PM
I definitely agree with GentleOne. I always recommend working in split view (even for beginners). If you're going to use Dreamweaver effectively, you need to understand HTML and CSS and watching the code change as you make design changes is a great way to get started.

Corrosive
02-05-2010, 05:49 PM
Yeah, what they said ;)

gank
02-05-2010, 06:45 PM
thank you all very much for your responses. As a beginner I found it a little intimidating, but I'm slowly dipping my toes into code. And thanks for allowing me to post a question like this in such a supportive and non-hostile forum. that's actually really appreciated

gentleone
02-05-2010, 07:32 PM
thank you all very much for your responses. As a beginner I found it a little intimidating, but I'm slowly dipping my toes into code. And thanks for allowing me to post a question like this in such a supportive and non-hostile forum. that's actually really appreciated

No props! We've all been there ;)