# Stretch image using CSS



## DrP (Jul 23, 2005)

Probably a daft Q but I've forgotten how to do it.
I have two images in my header. The first has the detail. The second is the same colour background as the first and sits to the right of it. I want to stretch the second image across the remaining width of the window. I can do it using tables but I'm trying to build the whole site using CSS.
Any ideas?
I've tried setting the second image width="100%" but that forces it below the first image so as to occupy 100% of the screen width.
Please help!


----------



## OldRS (Nov 14, 2005)

Have you tried to set the width of the second image to 100-[width of first image]?  For example:
1st image: width="40%"
2nd image: width="60%"


----------



## DrP (Jul 23, 2005)

The problem is the first image needs to be a fixed size because it is a gif containing text. If it isn't fixed then it'll look awful. I thought if I told the second image to be 100% then it would just fill the remainer.
That help?


----------



## OldRS (Nov 14, 2005)

As far as I know, I do not believe there is any way to mix fixed width with a % width. It has to be all one or all the other. I Will do some checking, but I am not hopeful. There may be a trick or two that may help you out, but may not give you exactly what you are hoping for. If I find anything I will let you know. Sorry.


----------



## ptvGuy (Apr 20, 2004)

It would be kind of complicated, but you could put the two into separate DIVs lined up next to each other with no borders. You would have to prevent overlap and make the first one a fixed width and the second a percentage like you tried before. The first would have a fixed position on the left and top. The second would have a fixed position however-many pixels from the left (the width of the first image) it needed to be. The second image should still be given the 100% width you gave it before, but it should now be confined to the total width of the DIV which you'll have to play with to make work.

Also, if it doesn't matter, you could allow overlap, put the second DIV on the right, and let the second image slide under the first one a little. Depending on the width of the first image, setting the second DIV to something like 50% should always put part of it under the first. This, of course, presumes that your second image is some kind of blending gradient that won't matter if you lose part of the left side under the first image.

My guess (without actually trying this) is that you'll get mixed results from different browsers and have to play with this a lot. However, if the second image IS a gradient, then there are far easier methods (not counting the Microsoft gradient filter which doesn't work through CSS) to blend the two together.


----------

