Extra div in header

Yes, I guess it must be quite confusing. Let me clear that up:

What confuses me, is the separation in linear zones, where all elements are contained within each zone. And the naming convention! Anyway, what I try to accomplish, is to have one sitewide header (#section-header?) with a background colour. I want to add an image (imagine a watermark or structure image with low density) to float on that background colour.
On top of it all comes all the other elements such as logo, sitename, menu, search-field etc. Whatever is necessary to have in that section.

The background colour I have done like this:

#section-header {
background-color: #70bd26;
background-image: -moz-linear-gradient(top, #739705 0%, #70bd26 100%);
background-image: -ms-linear-gradient(top, #739705 0%, #70bd26 100%);
background-image: -o-linear-gradient(top, #739705 0%, #70bd26 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #739705), color-stop(1, #70bd26));
background-image: -webkit-linear-gradient(top, #739705 0%, #70bd26 100%);
background-image: linear-gradient(top, #739705 0%, #70bd26 100%);
}

Now, adding an image as background-image: url ... doesn't exactly play nice with the above. So I figure I need an extra container to separate things a bit.

Hope that helps.

Thanks,
- Christian

That doesn't make enough sense to me. There must be more to it, than just copy one to the other.

I appreciate your help, Sebastian, it's only that I'm a beginner. I need more to go on. It's a fairly complex learning process already. I'm really fascinated with the possibilities in this theme, I have just not grasped all of it yet.
I have been trying to pick up as much as possible from available documentation before I posted here. As said, I hope I can give back to others one day.

Thanks,
- Christian

Thank you both. Not sure I got it right, though.

I did as above.

Should I then be able to use:


#section-header .section-header-inner {
background-image: url(../../../../default/files/watermark-header.png);
background-repeat: no-repeat;
float: left;
margin: 300px 0 0px 0px;
padding-bottom: 10px;
}


??

Nothing happens,

Well, I tried that already. It blew the entire header section. Only a few elements left, menu gone. The preface-zone marches right up into what was suppose to be my header.

If I omit the # from section-header-inner, the site is restored.
So, something is not quite as it should be.

Very likely(?) it has to do with the way I added the background color/image?

- Christian

Edit: I'm certain now, it's the PHP part, I have wrong. But I cannot see how.

Per instruction, I have copied the 'section--header.tpl.php' to my themes templates folder. Then I have edited it to have:

<header<?php print $attributes; ?>>
  <div id="section-header-inner">
    <?php print $content; ?>
  </div>
</header>

and nothing else.

The result is that when I insert '#section-header-inner' in my CSS, the header disappears.

What have I overlooked in your instructions?

Thank you so much, Pratheep, for pointing that out. I completely failed to see that. Copied it from some other css, and thought it would float the image 300px from left. Just to see it affect. Never mind the 300px. Just a number

Anyway, things are looking much more promising now. Image is there looking nice. I only have to figure out which values to use, to position it, and this seems to work:

#section-header-inner  {
	background-image: url(../../../../default/files/watermark-header.png);
	background-repeat: no-repeat;
	background-position: 30% 20%;
}

Issue closed from my point of view.