[Solved] Scalable image in header

multiple background images are not part of CSS 2.1, they are part CSS 3, but only Safari supports it right now. Can you show a pic of what you're trying to accomplish?

Hi Wolf,

This was what I was thinking about:
http://www.imagewoof.com/view_image/dd28d401/header_image.jpg
The middle image should be used to fill up the space between the left and right image. I hope that is clear.

I don't mind that CSS2.1 does not support multiple background images, I only want to be able to offer an image in the header that seems to grow, and shrink, with the width of the browser.

What I mean is discussed on http://dev.joomla.org/content/view/1136/79/1/10/

How do I accomplish that?

Macamba

It's not yet clear (to me). You're showing 4 colors: red, white, black, (white again) green. Is it that you want the red on the left a certain width; green on the right, again a certain width; and everything in between black?
Are you using solid colors, or are they indeed images?
Are they two outer sections fixed width?

oh, and btw, you can post images here in the forum.

edit/ hold on, I just saw the second link in your post. BRB

Well to accomplish that with the three backgrounds you will need 3 elements to place a bg on. The image on the left looks like it would be used as a logo or site name - I would place an image on a hx tag inside the header for this.

Now as far as the other two are concerned, I would actually be inclined to use a single, non repeating image that includes the top right rounded corner. This image would need to be as long as the widest you would expect a page to be (minus the left image) would would probably equate to around 2000px. This bg image would be placed on the header div to the top right, and any overflow would just not be seen, but be revealed as the window size increased. The increase in file size would be negligible, and would decrease an extraneous element and server calls.

Yes, I know you can post images on the forum. But when I tried it, nothing was shown. So I had to revert back to the link.

On your other point, I do not see how I can accomplish this. Anyone else with an insight?

Do you mean that you don't understand the suggested solution, or that you don't believe in it? If it's the first, just ask and I'm sure you will be guided through it.

The solution should work great and is probably the best one, if there aren't other factors to consider.

Actually, I don't understand. If you would clarify, I would be obliged.

In the mean time, I was thinking on a different track. I thought to solve my problem by only defining the background image in the css file. In html I would then define the header image, and the image on the right. But the result was not to my liking.

Here is the code I used:

This is a test with a scalable image

#header
{
height: 80px;
background-image: url('middle.jpg');
background-repeat: repeat-x;
background-position: 0 0;
/* border-bottom: 1px solid #fff; */
position: relative;
}

This is a test with a scalable image

The not so beautiful result is displayed in (about a browser page big):
http://www.imagewoof.com/view_image/a8932946/Letter_webpage.JPG

So this is not the approach either. Anyone (Wolf) an idea? Or is this not the correct track to follow?

Macamba

Here's my approach:

This is a test with a scalable image

/**/

I threw together some mockup images as well. Note that I used jpgs and defaulted to white under the 'corners'. You could use pngs as well (with some javascript hacks for IE6) and use any color body background.

Thanks Wolf.

That hit the spot.

Macamba