3 piece image not seemless

I read elsewhere on this forum today about making an image in pieces so that the middle piece expands/contracts based on the content.

Here’s my attempt - the Gold border News section: www.littlemissnc.com/testing.php

But for some reason, the top image and the middle image won’t meet, but the middle and bottom does.

I have no padding, other than within the middle piece because of text needing to ‘clear’ the image.

There is no “white space” on the edges of the images themselves to account for it.


You really should have used a background image on the div rather than a real image as you don’t want messy html :slight_smile:

The gap is because the image is stacked on the baseline and causes a small gap. Set the image to vertical-align:top or set it to display:block.

However you would be better to use an empty div and just give it a height and width and use a background image.

As a rule of thumb you should ask yourself “Is this image content or decoration”? If its decoration then it belongs in the background in the css. If the image is important to the content then it goes in the html.


Thanks for replying.

So, all three splices of the image should be background for their respective div and not just the middle one? I thought since the middle one was going to be repeat-y as the content expands/contracts (content will be changed out often), that would be the only one as background.

Ok, let me give your suggestion a whirl. (:

No, all decoration images should be in the background. It keeps the page leaner and cleaner and easier to manage even if you need the odd empty div to hold an image. If you are creative you can often use existing elements without adding empty divs but does depend on the structure.

Well, I put the bottom piece of the border in an empty div as the div’s background and the darn thing just disappeared. ppfffttt!

At least I have the top and middle pieces as backgrounds.
The top piece div has the title “News and Information”, hence why it didn’t disappear.

See, my brain just needed a tiny rest.

I re-read what you said about adding height and width to empty div.

Now I know why my top and bottom disappeared earlier when I tried it - I didn’t put in those dimensions.

Now, it is seamless!

Thanks so much! Love learning new little tidbits … now if only I can remember them for next time.

Oh! I also learned a bit about how to do RSS feeds. I copied another site on how they did it. :cool:

Glad you are making progress. Sometimes it helps to make mistakes because you remember them better next time :slight_smile: