CSS: background image in a content box.

This one should be a challenge, i should think.

Here's the situation:

I have a typical content box sliced into three images, namely: the header.gif (200 x 20 pixels), the content.gif (1 pixel in height, set to repeat vertically downwards) and of course, the footer.gif (200 x 20 pixels).

I coded the contentbox using CSS:

And the html file:


So that's pretty basic. As you add more content between the content div tags, then the content.gif will automatically repeat itself vertically downwards, since the content.gif is set as the background image of the content div tags. But what if I wanted to add an image as a background of the content area, let's say an image of a puppy. But the background-image is already the content.gif.

The final work should look like this:

Hmm, what do you say, challenging? A client actually requested that I should have an image as a background of the content boxes, but i'm not sure how i can do that. Any help would be appreciated. Oh, and hi

You could have that image but remember to set it to no-repeat and have a matching background colour that can expand the box underneath the image. You will also have to ensure there is always enough content inside the content box to enable the image viewing in full.

Hey Julian, how are you? Maybe it isn't a challenge after all. So let's say i get the puppy.gif image. I replace the content.gif with it like this..

#content
{
background-image: url('puppy.gif') no-repeat;
background-color: /*matching bg color*/
padding: 0;
margin: 0;
width: 200px;
height: 100px
}

It should work!

Only one problem. This is the current background image of the content area:

and this is the outcome:

in this case, the solution is rather simple:

make your dropshadow/gradient image the bg of the container div. since you have the images of the header and footer overlapping the container, the bg image for the container repeats then as the content div increases length. then make the image of the puppy the bg of the content div.

lol, chaka explained it