PDA

View Full Version : Background Help



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

http://imagenerd.com/uploads/indexbackground-copyEVam.jpg

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!

Antoniohawk
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.

gfX
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:
http://imagenerd.com/uploads/topbgoUbJ.gif

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

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

http://www.nopeople.com/gfx/

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

http://www.nopeople.com/gfx/
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

harbingerOTV
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:


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