N00b question

I have downloaded and installed a WP theme onto my blog. The header block is just a grey box at the moment with the title/subheading and a link. What I want to do is: replace the grey box with/place on top of the grey box, a .jpg that would be my logo.

My question is this, how do I do that? At the moment the box resizes depending on the window size but only width wise, if I were to replace the box with just the image it would stretch the image and make it look poor, (I think?).

current code is

#headerblock {
    position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width: auto;
    min-width: 120px;
    margin: 0px 210px 20px 190px;
    border: 1px solid #000000;
    background: #cccccc;
    padding: 10px;
    z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    font-size: 16px;
    font-weight: 600;
    }

PHP:

I thought that I could maybe add a line to include the image, something like

#headerblock {
    position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width: auto;
    min-width: 120px;
    margin: 0px 210px 20px 190px;
    border: 1px solid #000000;
    background: #cccccc;
    background-img: /images/rainbow.jpg;
    padding: 10px;
    z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    font-size: 16px;
    font-weight: 600;
    }

PHP:

would this work? Or would I need to add something else?

Thanks

Laz

 

try this:

background: url(/images/rainbow.jpg) no-repeat;

if doesn't work, check the path of your image file....

thx

 

yeah it works, sort of..

I resized the image as it was kinda hooge, but now I have the problem that when I use a full screen page it only takes up half of the box, If I make it the size of the box at full page, then when it is reduced its not all visible..

is there a way to make the image centred within the box itself, regardless of the size of the box?

 

add margin:0 auto; to it but make sure you define it's height and width. it will center inside of the parent container. also, for future reference, this belongs in the css forums

 

course it does, sorry :sheepish

thanks though ansi and infernaliuns