Header Background Image

Hello. I am trying to replicate what these people did at this Boonex site: http://autismhelp.com.au/

You'll notice that they have an incredible header that blends in perfectly. Well, this is what I want to do. I wish to have a header background image like this, but can't seem to find how to do it.

I've already gone to the /templates/base/css/common.css file and added the background image code, but the image does NOT show up in the header... it shows up in the body and repeats itself, which is NOT what I want.

Does anybody know how I can replicate what they've done at http://autismhelp.com.au/ in regards to their header?

I have firebug installed in firefox, but still can't figure this out.

Derwin

Moved.

You'll have to cut your image in half (or a different percentage depending on how you want it to show up) and put the top half of the image in the header and the bottom half of the image as the body background.

You'll want to set each image to Center so they line up and the body image should be aligned to the top and set to no repeat.

The header background is found in templates/base(or your template name)/css/general.css at the settings for div.sys_main_logo (not sure what line yours will be at since mine's been heavily modded):

    background-color:#FFFFFF;
    background-image:url('http://yourURL/templates/base/images/header_bg.png');
    background-position: Center;
    background-repeat: repeat;
    background-attachment: fixed;

The body background is, as you discovered, found in templates/base(or your template name)/css/common.css around line 5:

    background-color:#FFFFFF;
    background-image:url('http://yourURL/templates/base/images/bottomhalfofimage.png);
    background-position: Center;
    background-repeat: no-repeat;
    background-attachment: scroll;

Thanks for the information.

But one thing I found out about the header background image at this location: http://autismhelp.com.au/  is that the image is NOT split, but it is ONE image.

I checked the "media" in the tools tab of firefox, and it shows that the header background image on that page is one image. Here is the url to that image: http://autismhelp.com.au//templates/tmpl_dt_friends_yellow/images/custom/header_background.png

So, do you know how I can replicate what they did here with this?

Thanks.

If you want to do it specifically how they did it then grab Firebug and you can peek all through their coding.

You could purchase the template or ask the developer to help you out as well;

http://www.boonex.com/m/Friends_Blue_Friends_Template_Collection

Oh, Wow! I didn't know this was a purchased template!

Thank you very much for the information!