View Full Version : Background Help

Mar 14th, 2007, 06:22 PM
I have a .psd that I am going to convert into CSS and HTML. Here is an image of it:


The problem I have is that I have no idea how I am going to code the background. I need when the content expands, that the background will also expand, but not repeat - because I do not want the green part to show again, just the dark gray to expand down.

Do you get what I'm saying?
I have tried a lot of things, but no luck.

If anyone could help that would be great. Thanks a lot!

Mar 14th, 2007, 07:59 PM
You could have two layers, one on the very bottom, with the dark grey background color and then one above with the green part. The green wouldn't repeat, but the grey would.

Another way to do it would be to use a very large image. Not exactly the best way to do it, but it would work.

Mar 14th, 2007, 08:07 PM
So have the body { background: url('bg.gif'); }
where bg.gif is the dark gray repeating.

And then make a div for:

on top of that?
then how would I make all the content start from the gray area on the image I just posted above?

Mar 14th, 2007, 08:21 PM
Hello gfx,
Have a look at this and see if it doesn't give you a start:


Mar 14th, 2007, 09:40 PM
Hello gfx,
Have a look at this and see if it doesn't give you a start:

Hey man,
Thanks a lot for that.

It looks great, but how about the dark gray background part - it is only displaying the green part, with a black background

Mar 15th, 2007, 02:02 AM
using Excavators example:

body {
text-align: center;
background-image: url(evam_top_slice.gif);
background-repeat: repeat-x;
background-position: top;
background-color: #484848;

okay so here's how I would probally do it all.

give the body the code above.

center a containerthat has the grey background with the drop shadow like the image you posted. make that repeat-y. position it relative. lookin at your slice, it looks like width:880px will do fine.

inside that a div that is also 880px that has the background of the slice you posted. give that div position:absolute; and a height of 153px.

now put an inner container and that's where you'll bild the site into. make it position: relative and z-index: 2 so it sits on top the last div you made.

sort of like:

<div id="container">
<div id="top">the top green slice goes here</div>
<div id="content">all your site goes here</div>