background image in div stretches.

[gwh]

Hi everyone,

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?

Appreciate any advice offered.

[markbrown4]

Hi,

background-images applied with CSS don't stretch, they only tile.
This may help you understand the limitation and possibilities of background images and CSS..
http://www.yellowshoe.com.au/tips/ro...sign-elements/

[gwh]

Thanks for the reply,

I don't think that the brushed metal image I created would work as a tile so does this mean that it's not possible for me to achieve the desired effect?

[Centauri]

If it won't tile, then you can make the image larger than you would expect the div to be - it then just gets cropped to the required size.

Alternately, as getting an image to tile seamlessly in both directions is not easy, maybe the graphic can be made wide and squat to tile vertically.

[gwh]

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?

[markbrown4]

Post the image and we'll be able to see what you are wanting.
http://www.imageshack.us/

[gwh]

I've uploaded the image if you can take a look?

[markbrown4]

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.

[gwh]

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?

[Centauri]

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.

[gwh]

Thanks - I'll give this a try, but also can you tell me what the difference is between background-image and background-position in CSS?

[markbrown4]

background-image is the url of the image.
background-position says where abouts within the element you want to position that image.