View Full Version : 3 Part Image Header in CSS

02-18-2009, 06:19 PM
I have a 3 part header, the first part is the logo that incorporates the left hand side of the header. The middle part which is a 1 px repeating slice of the image and the right part which is 3px wide border of the image. I can get the first two to line up properly but I cannot figure out for the life of me figure out how to align the right hand side with the left and middle.

This is the right hand image:


<div class="container">

<div id="header"><a href="index.html"><img src="images/header/logo.gif" /></a> </div>


#header {background-image:url(images/header/header_fill.gif); background-repeat:repeat-x; width:952px; }

img{ border-style:none;}

02-18-2009, 06:52 PM
Where is #header_left in your HTML? We'll need a link to your page or your full code (HTML and CSS) in &#91;CODE&#93;&#91;/CODE&#93; (not &#91;iCODE&#93;) tags in order to assist.

02-18-2009, 06:54 PM
I have edited the original post and the files are locally hosted so no direct link possible.

02-18-2009, 07:02 PM
Posting all your code is still your best guarantee of a satisfactory response, regardless of whether or not the site is local.

Try making your <a> a container for the right cap:

#header {
background:url(mages/header/header_fill.gif) repeat-x;

#header a {
background:url(images/header/header_right.gif) right no-repeat;

img {

Is that what you're after?

02-18-2009, 07:06 PM
Hello alexenk,
It's pretty hard to work on an image related question when we don't get the images.
The code you posted is only loading 2 images.

If you don't have hosting to set up a test site, zip up the files (#header CSS, HTML and the images and upload it to rapidshare so we can download it and have something to work with.

02-18-2009, 07:34 PM
msuffern you have fixed it! I reset some manual widths and applied your #header a trick and all is sorted. Thank you!