Image Size Dependent on Area

[treeleaf20]

Maybe this is an easy question:

I have the following CSS:

.fn-area:hover {
position: absolute;
background-image: url(artwork/image.gif);
border: 1px solid #fff;
}

 

The area is different sizes however. Is there anyway to make the image in the background adjust to the size of the area when I hover over it? I don't want the image to repeat if the area is bigger then the image and I don't want only part of the image to appear if it's smaller then the image.

[haku]

Set these:

 

background-repeat:no-repeat;
min-height:___px;
min-width:___px;

[treeleaf20]

What do you mean by min height or min width? What happens if I hve two diferrent things. One is 100x75 and another one is 425x50? These are both def possible scenarios and both on the same page. 

[treeleaf20]

Actually, it's always in the shape of a rectangle. So it would have more dimensions then that but it should give you an idea of my problem.

[haku]

So set the size separately for each div.

[nadeemshafi9]

So set the size separately for each div.

 

are your _ scores theoretical wildcards or code?

[treeleaf20]

I'm guessing they are theoretical wildcards. Not sure how to set the size differently for each div?

[haku]

Give each div an ID and target that ID with your CSS.