How do I do this right? make a website from this .jpeg

[realmuffin]

Hi everyone,

I have a .jpeg (attached) of a layout my friend wants me to make for her. I'd like to use CSS where possible (instead of just slicing it up--or is that the best way?).

See the drop shadow all the way around? There are a few places where it would run into the swirls in the background (preventing me, I think, from using a repeating image there).

Any suggestions as to how I should attack this? What would be your first steps?

Thanks for any advice

[yamaharuss]

You will have to slice some, dice some, edit here and there.. How you run your background depends on how you will lay out your content. You could set the background as fixed and scroll your content within divs or else slice the background to include a fixed TOP div background, a fixed BOTTOM div background and use a repeat for the flowing middle content between.

[realmuffin]

I'm definitely trying to use a fixed top, fixed bottom, and fluid (repeating) mid section..

Is this the correct syntax:

<div id="header" style="background-image: url('headerslice.png');">
</div>

<div id="middle" style="background-image: url('middleslice.png'); background-repeat:repeat-y;">
</div>

<div id="footer" style="background-image: url('bottomslice.png');">
</div>

[yamaharuss]

looks like you're on the right track but you will certainly need more styling.

[realmuffin]

thanks!

And is this what I would add to make it a fluid layout? So that when stretched wide it will expand the background image size?

<div id="header" style="background-image: url('headerslice.png'); width:75%; max-width: 1200px">
</div>

[yamaharuss]

You would create an outer div container and define it's size. No need to define your other widths, most likely only a height for header and footer

[realmuffin]

hmm, not sure I follow.

If the image 'headerslice.png' is 800px wide, and sits inside of the header div (no set width), and the header div sits inside of the wrapper div, which is set to a fluid width of 75&#37; and max 1200px. How will the header div ever increase in size when it only has 800px to begin with?