Hi,

I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. I’ve attached it below.

The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp.

Is this possible?

hmmm i dont understand, the image as a background?

I think it would work. How about you try it first and tell us if it doesnt and let’s see what the problem is.

Regards,
Jeaniel
Ordinateur portable pas cher

I would like the image to scale horizontally just like I can do using Gimp.
Is this possible?

Hi,
No, it is not possible as a background image with CSS2.1

However, it is an upcoming feature in CSS3 and it will be very useful.
http://www.css3.info/preview/background-size/
It will be quite a while before there is cross browser support for CSS3 so you would have to wait on that.

The only way you can scale an image currently is through the html.
You can make it appear to be a background image by using fixed positioning on the image and setting a higher z-index on any element that may contain text.

Here is a live example of a Scaling Fake Background Image (Reduce your viewport to see it scale)

View the page source for details. Note that the image is located in the very last p tag of the html.