background-image not full sized?

[xxshadowxx]

Hello All,

I was wondering if it is possible to make an image larger when you are using it for the background, even if the text is smaller than the image.

.test {
position:absolute;
background-image:url(stars.gif);
background-repeat: no-repeat;
left:100px;
top:150px;
}

stars.gif is larger than the text, however the browser or css reformats it to be the (close) size of the text.

Thanks in advance.

[Setek]

Because it is a background image, it doesn't increase the size of the element.

If you want the element to be taller than it is, you have to set a minimum height (

min-height

, you'll also have to use plain

height

for IE 6 since it doesn't recognise

min-height

but instead accept

height

fluidly.)

Wider, is a little trickier. You have to use a javascript expression in a conditional comment for minimum width in IE 6, and use

min-width

for everything else.

Or you could apply padding to the element.

It really depends on what effect you want to achieve :)

[edited by: Setek at 1:45 am (utc) on May 22, 2007]

[xxshadowxx]

thanks for the reply, heres my updated code:

position:absolute;
width:44px;
min-width:44px;
background-image:url(stars.gif);
background-repeat: no-repeat;
left:120px;
top:140px;

what am i doing wrong?

[xxshadowxx]

never mind, i was being stupid :D