Banner Image fill background area

[dickalan]

ok i tried to solve this already by this post but i couldn't:

Krishna,
The answer to this is as non-techie as it gets. Search for "header foreground" on this forum - this topic has been addressed in several queries. For your reference you can check out these threads: viewtopic.php?f=4&t=148&p=804, viewtopic.php?f=3&t=100&p=527, viewtopic.php?f=4&t=84&p=402, viewtopic.php?f=4&t=44&p=206 and viewtopic.php?f=4&t=36&p=158.

Sayontan.

My question is at my site: http://www.andrewwkmusic.com/home You'll see that the banner picture doesn't completely fill to the top of the body page and to the sides of the body (not the back background). How can i get my image to fill up those gaps??? I've tried messuring it out but it still put it into what looks like just a generic header image thingy....

thanks!

[sayontan]

Not sure if I understood your question correctly, but I suspect you want to remove the padding at the sides and top for the header. If so, put this in "Custom Styles" under "Custom CSS, JavaScript and RSS":

Code: Select all

#wrapper {
        padding: 0;
}

#container {
        margin: 0px 10px;
}

#cred {
        margin: 0px 10px 10px 10px;
}


[dickalan]

I'm pretty new at coding php and css. actually brand new at it!
So to clarify when I'm in the wordpress dashboard i go to appearance>editor. Then that's where I'm confused.
Under "Templates" I see "custom-styles.php". Then under the header "Styles" I see "custom.css" Which one do I put that code under? Cause I can't find that section you're talking about.

And to clarify what my question was All I want is for my 'image' to fill up the gaps of the background. Do you see where the red image header doesn't go all the way to the top or doesn't reach all the way to the sides? It just looks weird how it is now...

[sayontan]

Actually the place you go to is "Appearance -> Suffusion Theme Options -> Custom CSS, JavaScript & RSS". Search for an option called "Custom Styles". Put this code in there. By putting the code there you don't have to worry about losing stuff when you upgrade the theme, as opposed to changing PHP / CSS files.

[dickalan]

worked like a charm thank!!!

[dickalan]

hmm... actually when I did that the 2nd sidebar widgets got shoved down the page! Scroll down and you'll see them. Any reason why this would happen or know how to fix it???

[sayontan]

I guess a little bit of experimentation is needed here. Instead of "margin" for the "#container", use "padding".

[dickalan]

#wrapper {
padding: 0;
}

#container {
margin: 0px 10px;
}

#cred {
margin: 0px 10px 10px 10px;
}

Ok so changing the "#container to 'padding' didn't do anything. however when i change the container>margin to '0px 0px;' it squishes the sides so there is no 'container' (i'm guessing that's what you call it) BUT that does bring the sidebar widgets up to the top how they were before....

Any other ideas?

oh, p.s. the banner image is exactly how i wanted it though so at least that's a success!

[sayontan]

Hi,
Since this is not the blog's standard layout, the widths are a bit trickier to set. Try these:

Code: Select all

#container {
        margin: 0 8px;
        width: 986px;
}

#sidebar.left, #sidebar-2.left {
        margin-right:8px;
}

#sidebar.right, #sidebar-2.right {
        margin-left:8px;
}


Keep the settings for #wrapper and #cred

[dickalan]

you're my new best friend! thanks