I haven't been able to find this question in any of the forums, (if there are threads already, please point me in the right direction). I'm an absolute newbie at design, html, etc. So exact directions would be greatly appreciated.

Here is my site: http://pregnancybaby411.com/

It was previously a Blogger blog, and I bought my own domain and I'm in the process of switching my blog over. I still have the blogspot blog until I can get the theme and design that I want. Since I'm a broke writer, I'm trying to do it myself without hiring a designer.

Anyway, here is my question.

Is it possible for me to resize my header image? Instead of the standard size given in the template, is it possible for the header image to be taller? I've hidden the Blog Title, since the header image I'm using has the title in it.

As you can see on my blog (http://pregnancybaby411.com/) There is a large gap between the top and the banner image.

SO I'd love any suggestions on how to make my header image taller, so it reaches all the way to the top of the page.

Also, is it possible to make the header wider, so that it stretches to the sides ... without changing the width of the blog entries?

I had attempted to change the width, but it changes the width of the entire page. And that's not what I'm aiming for. I'd like the banner image to stretch all the way from left to right, and to fill until the top.

I hope that makes sense. Thanks for your help.

I've attached a screenshot to explain what I mean.

Look at the options for the header image. You can make yhr SPACE for the image taller, but you cant scale the image, you need to do that prior to putting the image in the images/header folder.

Also you might want to look in ATO>Style & configure Layout. Change

padding: 20px;
to
padding: 0 20px 20px 20px;

That will remove the space above your image.
Is that what you are looking to do?

Larry, I tried to change the HTML code with the padding that you suggested, but the space above my header image is still there...

Arg.

The site looks good! Did you fix your problem?

ato->Body, Text & Links->Body Style remove the 'padding-top:20px;'

Hey Juggle Dad,

Thanks for the suggestion. The gap did get smaller, but there is still a slight gap above and below the image header. Is there anyway to remove that?

I removed the padding-top as you suggested, but the slight gap still exists.

Thanks.

One way to get rid of that would be to put the following in ATO>Add HTML/CSS Inserts>CSS Inserts

div.header-image-container {
margin-top: -5px;
}

Thanks Larry!!!

How do I get rid of the gap on the bottom of the header (between the image header and category bar)? Can you give me the code for that? Thanks!

I couldn't get anything to work without messing up the menu. Not quite sure what is going on. However since you are not using rotating images have you considered using an image in place of %image in ATO>Style & edit Header Area? In your case you would take out %image and add the following.

<img src="/wp-content/themes/atahualpa/images/header/blogbanner970.jpg" />

Perfect! That fixed the problem. thanks a billion!!!!



This has been the best forum!

the problem with the header image is this code in the CSS Inserts, it's adding a 5px top and bottom border and the border is white. So take this code out and Larry's suggestion of the 'margin-top: -5px;'

div#imagecontainer {
border-top:solid 5px #FFFFFF;
border-bottom:solid 5px #FFFFFF;

And why didn't I see that