Need help placing logo with CSS

HTML & CSS
1

Was hoping someone can help me with placing a logo with CSS.

I have a joomla site with an artisteer template.

i want to place a logo above the header.

Artisteer does not support any modules above the header so I think my only option is with css.

I’m not too savvy with css so hoping some one can help me.

Here is the current header HTML

<div class=“art-header”>
<div class=“art-header-jpeg”></div>
</div>

Here is the header css

/* end Header Logo*/

/* begin Header */
div.art-header
{
margin: 0 auto;
position: relative;
z-index: 0;
width: 890px;
height: 200px;
overflow: hidden;
}

div.art-header-jpeg
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 890px;
height: 200px;
background-image: url(‘…/images/header.jpg’);
background-repeat: no-repeat;
background-position: center center;
}

/* end Header */

The template is a 900 px wide template with about 30px offset from the top of the page.

I want to place a small logo above the header and top of the page that is left justified with the template.

2

go back to using your ORIGINAL mark up.
<div class=“art-header”>
<div class=“art-header-jpeg”></div>
</div>

I am assuming art-header is the trees, and that you have a separate image for the logo.
I am also assuming art-header has that 30px offset you didnt list here OR that there is another element ALREADY giving it that 30px offset you mentioned.

div.art-header
{
margin: 0 auto;/* if it’s not offset from the top change to: ‘30 auto 0 auto’ */
position: relative;
/*z-index: -1; remove this */
width: 890px;
height: 200px;
/overflow: hidden; remove this !!!/
}

div.art-header-jpeg
{
position: absolute;
/*z-index: -1; remove this /
top: -30px ; /height of the logo + however many px you want it to be away from the top of your header I used 30px + 0px respectively)
left: 10px; /how far from the left edge do you want your logo to be/
width: 100px; /width of your logo image/
height: 30px; / height of your logo image/
background-image: url(‘…/images/LOGO.jpg’); no-repeat;
}

3

Now I created a copy of that css for my logo and then added a new div above the header in the html.

When I load the page I can see the logo for just a second and then the header overlays it.

I just need to get it to move up, not sure how.

4

Now I used firefox with the bug and found that the below css is where I what my logo to appear.

this is also the same area of the offset from the top of the page to the header.

.art-sheet
{
position: relative;
z-index: 0;
margin: 0 auto;
width: 900px;
min-width: 23px;
min-height: 23px;
}

How do I get a logo image in this position.