I've created a "brushed metal" look background in photoshop and would like this to be the background for a div. The problem is that the div will contain text of varying amounts and so therefore the height of the div will change according to how much text it contains. This would mean that the background image would stretch and become distorted as the container div stretches.
It seems that it's not possible to achieve this background image effect due to the variable height div, but if there is actually some workaround can anyone tell me what the solution might be?
So would the image be in an img tag within the div as opposed to a css background-image? If this is the case then wouldn't I need to set the containing div's height to auto or 100%, and if I do this won't the div automatically stretch to the height of the image and therefore not be cropped?
OK, I would make a similar image that can tile horizontally, and I would make it much taller than that - depending on the amount of text you are wanting it to cover.
I would align this image to the bottom of the div and make it tile horizontally.
So at the bottom of the div would be the darkest part of the image.
I guess that's the problem - I don't know how to make an image like this tile. I just made a selection of the image (the entire length and a small width) then duplicated it horizontally but it didn't tile very well. Is there some sort of technique I need to know to make it tile correctly?
As the image is quite large (which you should try and optimise a bit more to get the file size down, even if it means sacrificing the quality a little), it can be applied as a background image with background-position: right bottom; style - this will position the background to get the most out of the gradient, and the div will crop it depending on size.