Two image in header

I already have an image in the header div tag. The url to the image is set in the css sheet. How do I set the css sheet to include a second image in the header? The first image is fixed, which mean it is not a repeating image. The second image will be set at the right of the first image, and the second one would be a repeating graphic.

 

One way you could do it is:

#header {
	background:url(image1.jpg) repeat 100px 0;
	position:relative;
	margin:0 auto;
	width:500px;
	height:100px;
	z-index:1;
}
#logo {
	background:url(image2.jpg) no-repeat;
	position:relative;
	width:100px;
	height:100px;
	z-index:2;
}

Code (markup):

<div id="header">
	<div id="logo"></div>
</div>

Code (markup):

I'm just assuming that you're trying to do a logo with a background in the header. If that's not the case, this should still create the effect that you're looking for.

The header has the image that will be repeating. I shifted the header's background over to the right by 100px (change this to whatever).

The logo is the image that is fixed and doesn't repeat.

I just applied z-indexing just in case.

You could also just apply CSS to the logo image (or whatever the fixed image is) directly instead of creating another div with a background image.

 

Thank you. This was very helpful for me. I was able to get the repeating image in the background, and the logo in front of it. Thank you for helping me out.