Basic CSS Question: How to specify height of background image of div?

Question

I have a an image not covering the background completely of a div. Can I specify the height of the image to make it larger?

transparent url(http://www.example.com/picture.jpg) height=??

Answer 1

You should only specify the height of the div. And use

repeat

property of background.

If you need to stretch use an image inside the div and make height and width to 100%.

Answer 2

You can not stretch a background image. Well at least you can not reliably do it cross browser today. The future CSS is most likely to support it, IIRC.

You will need to use a <img> element if you want to use the browser to stretch an image, but this is not recommended.

If you are not wanting to stretch the image, but more some of the background image is cut off, then expand the height of the element that has the background with the css property width or height.

Answer 3

if the background is just a solid color, you can use repeat-y.

Answer 4

Background images can't be stretched.

Use an img tag with absolute positioning and z-index it behind your other elements.

Answer 5

CSS3 does this with http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. Sadly no browsers support that yet. You have to do a img.

See http://webdesign.about.com/od/css3/f/blfaqbgsize.htm and http://www.kyrnin.com/about/blfakebgstretchexample.htm