CSS/Header help please.

Hi, I'm looking for some help as I appear to have run out of ideas.



Been fiddling with the CSS a bit and managed to change the clolour of the header. Now I'm stuck and have 2 questions.

1) In the red circle in the top left of the screenshot, how do I get rid of the 2 grey bars and make it completely black? What do I need to change in the CSS that is posted with the screenshot (albeit rather small, sorry)?

2) If I was to put a small image in the same corner, would the image automatically resize itself and woud the text move over automatically.

Been trying to do this myself the entire day but I have to admit defeat. Thanks.

Hmm ...
1- Let's try with a "width" and a "border none" in your CSS :

Code:

.headerbar {background: #000000 url('') top center repeat-y;
width: 100%; /*or a width "auto"------------------*/
border: none!important;
padding: 0pt 5px;
}

However, I ask myself where are these two bars coming from ?
If it's an image, there is no other way than through a software for images.

2- Nope, it is'nt automatically resized. We need to use also a software, or putting the style in its tag or in the CSS with an attribute "class", as well for the padding (even if the text will shift to the right) :

Code:

<img src="image_url" height="YY" width="XX" style="padding: Ypx Xpx Ypx;" border="0" alt="Image Title" />
Or in the CSS :
.class_name {width: XXpx; height: YYpx;
padding: Ypx Xpx Ypx;
}
and reclling in HTML so :
<img src="image_url" class="class_name" border="0" alt="Image Title" />


This syntax of the padding goes in the direction of clockwise :
Ypx >(top) Xpx >(right) Ypx >(bottom) Xpx >(left)
(Of course X (width) and Y (height) should be replaced by values).