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

Discussion in 'Web Design and Development' started by kkachurak, May 26, 2008.

  1. macrumors regular

    Joined:
    Jun 26, 2007
    Location:
    Orlando, FL
    #1
    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?
     
  2. macrumors 65816

    XnavxeMiyyep

    Joined:
    Mar 27, 2003
    Location:
    Washington
    #2
    Use the line
    in your css.
     
  3. thread starter macrumors regular

    Joined:
    Jun 26, 2007
    Location:
    Orlando, FL
    #3
    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.
     
  4. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #4
    No, you can't control the height of the image in CSS as a background. You can control the position and repeat though.
     
  5. thread starter macrumors regular

    Joined:
    Jun 26, 2007
    Location:
    Orlando, FL
    #5
    Sorry to be such a newbie, but can you fill me on the code for controlling position within CSS?
     
  6. thread starter macrumors regular

    Joined:
    Jun 26, 2007
    Location:
    Orlando, FL
    #6
    Also,

    I'm seeing this in my CSS.

    [​IMG]

    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.
     
  7. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #7
    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)
     
  8. macrumors member

    Joined:
    Oct 18, 2006
    Location:
    Yeovil, UK
    #8
    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.
     
  9. thread starter macrumors regular

    Joined:
    Jun 26, 2007
    Location:
    Orlando, FL
    #9
    Good stuff, thanks everyone.
     

Share This Page