You want something as wide as fairegarden's theme?

I tried using the CSS posted by Devblog, but it was apparently built for another template. =/

HTH, I will remember that from now on.

Frances

Many thanks to you both for helping so much too.

Frances

My original code, should've worked just fine. It worked for me.

Anyway, since you already uploaded a new image, just modify the "#header-overlay" code with this:

#header-overlay {
background:#161410 url('http://fairegarden.files.wordpress.com/2008/12/december-4-2008-029-4.jpg') no-repeat top left;
width:995px;
height:151px;
z-index:5;
position:absolute;
overflow: hidden;
top:0;
left:0;
}

That should work.

BTW, HTH means "Hope That Helps".

The code shouldn't have erased the header, just covered it. Did you put the correct URL path in the background attribute?

In my suggestion I'm limiting the height to 151px because you don't really need to have that much empty space underneath it.

Also, I'm adding a background color so that if for some reason the image fails to appear, the bg will cover the smaller image (which would make the blog look weird).

HTH

#header-overlay {
background:url('http://fairegarden.wordpress.com/files/2008/12/december-4-2008-029-4.jpg') no-repeat top left;
width:995px;
height:351px;
z-index:5;
position:absolute;
top:0;
left:0;
}

And for this:

#wrapper {
background:url('images/content_bkg.gif') repeat-y top left;
}

You shouldn't need to have that in your editing window at all, since you're not making any changes to the stylesheet there. Your editor should only contain the code that you want to overwrite the stylesheet, not the whole stylesheet. Make sure you have 'Add to Existing Stylesheet' checked, obviously.

Anyway, try replacing the current declaration with this one:

#header-overlay {
background: #161410 url('url-path/to/new-header.file') no-repeat top left;
width:995px;
height:151px;
z-index:5;
position:absolute;
top:0;
left:0;
}

That should do the trick.

in the #header-overlay parenthesis.

#wrapper {
background:url('images/content_bkg.gif') repeat-y top left;
}

#header-overlay {
background:url('images/header_overlay.gif') no-repeat top left;
width:995px;
height:351px;
z-index:5;
position:absolute;
top:0;
left:0;
}

Could you post the header CSS code you've been using here, so we can have a look at it?

Replace the current definitions in your CSS with the following ones:

.hr {
background-color:#22201d;
border:1px solid #363430;
height:10px;
width:993px;
margin:10px 0;
}

#page {
width:995px;
margin:50px auto 25px;
padding:0;
}

#wrapper,#headerimg {
width:995px;
position:relative;
}

#header-overlay {
background:url('images/header_overlay.gif') no-repeat top left;
width:995px;
height:151px;
z-index:5;
position:absolute;
top:0;
left:0;
}

#content {
float:left;
font-size:1.1em;
width:750px;
}

Also, remember to create a new header image. The new image should have a width of 995 pixels.

Try that. HTH

I use Windows vista, it came on the computer.

MSN and A T and T provide our service. That's all I know.

I can change anything you tell me too, as long as you give me the beginning code, I don't know much of that.

Thanks so much.

but my system is not compatible with Firefox

That's a first... Maybe you had a plugin that wasn't playing nice?

Anyway, tell me how wide would you like your contents part to be and I'll see if I can be of assistance. You will need to change other element attributes as well.