Possible to use .gif as background in a <Div>

[kkachurak]

I'm wondering if it's possible to use a .gif image as a background in a small <div> box. I have the opacity on the image turned down quite a bit and think it would make an appropriate background.

Is this possible and how would the code work?

[XnavxeMiyyep]

Use the line background-image: url('backgroundimage.gif'); in your css.

[kkachurak]

Use the line in your css.

Thanks. Any way to maintain control over the image as if I was using <img src> like the height="x" instruction?

I reuse the same image multiple times over the site and want to be able to only have one instance of it on the server.

[mnkeybsness]

No, you can't control the height of the image in CSS as a background. You can control the position and repeat though.

[kkachurak]

No, you can't control the height of the image in CSS as a background. You can control the position and repeat though.

Sorry to be such a newbie, but can you fill me on the code for controlling position within CSS?

[kkachurak]

Also,

I'm seeing this in my CSS.

http://homepage.mac.com/kkachurak/code.png

I know the four values in the "padding" line represent the distance in units from each side, but I'm wondering in what order:

i.e. left, right, top, bottom.

I'm not sure that's correct but I'm willing to bet someone knows better than I.

Thanks.

[mnkeybsness]

Sorry to be such a newbie, but can you fill me on the code for controlling position within CSS?

background-position: left top;
you can substitute left and top for pixels "5px" or "right", "bottom" and "center"

background-repeat: no-repeat;
or "repeat-x", "repeat-y" or "repeat"

or you can use shorthand like this:
background: #FFFFFF url(image.gif) left top no-repeat;
(color, image, position, repeat)

W3Schools (http://www.w3schools.com/css/css_background.asp) is also a great resource for newbies!

And for padding (and margins), the order is "top right bottom left" (clockwise from top)

[advocation]

I find a good way of remembering the order of css shortcuts like this:

#div { padding: 5px 2px 10px 2px; }

Trouble. Top. Right. Bottom. Left.

[kkachurak]

Good stuff, thanks everyone.