Showing parts of images in a DIV

[Mogh]

Hi folks,

I'm creating a web page where I have a DIV that runs horizontally across the top of the page, and expands depending on the size of the page, so that it always fills the page. A header bar, if you like.

I've got six images that I've put in the DIV - the idea being that if you are on a 800x600 screen, you might only see three; if on a 1024x768 you might see four and a half images; perhaps all six at 1280x768.

What I need to do is make it so that you CAN see part of an image - so that if your window is wide enough to see three and a half images, you see three and a half images. At present I can only get it to show the full three, but it won't show part. If the window is big enough to show 3 images and 90% of the fourth, only the three are shown and I am left with an ugly empty space at the end.

The current code I have is:

(HTML)
<div id="headerPhotos">
<img src="headerPan01.jpg"></img>
<img src="headerPan02.jpg"></img>
<img src="headerPan03.jpg"></img>
<img src="headerPan04.jpg"></img>
<img src="headerPan05.jpg"></img>
<img src="headerPan06.jpg"></img>
</div>

(CSS)
div#headerPhotos {
position: absolute;
left: 295px;
top: 0px;
right: 0px;
height: 113px;
z-index: 0;
font-size: 0;
overflow: visible;
}

Has anyone got any ideas on how to fix this?

Many thanks!

[mark87]

Easiest way would be to make them all one image, and set them as the background like so -

background: url(headerPan.jpg) center no-repeat;

That way it'll also be centred, but you could just leave out 'center' and it'd run from the left.

[Mogh]

Ahh, now that sounds like a smart plan. I take it that it won't compress the image to fit the box- just show it at normal size but cut it off at the end?

[mark87]

Yup it will just cut it off.

Let us know how you get on. :)

[Mogh]

It worked beautifully! Thanks for the advice; I think I was really going a ridiculously hard way about it when there was a very simple method. D'oh!