Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

K

kkachurak

macrumors regular
Original poster
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 said:
Use the line in your css.
Click to expand...

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.
 
No, you can't control the height of the image in CSS as a background. You can control the position and repeat though.
 
Also,

I'm seeing this in my CSS.

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.
 
kkachurak said:
Sorry to be such a newbie, but can you fill me on the code for controlling position within CSS?
Click to expand...

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 is also a great resource for newbies!

And for padding (and margins), the order is "top right bottom left" (clockwise from top)
 
I find a good way of remembering the order of css shortcuts like this:

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

Trouble. Top. Right. Bottom. Left.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back