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

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

  1. kkachurak
    Expand Collapse
    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. XnavxeMiyyep
    Expand Collapse
    macrumors 65816

    XnavxeMiyyep

    Joined:
    Mar 27, 2003
    Location:
    Washington
    #2
    Use the line
    in your css.
     
  3. kkachurak
    Expand Collapse
    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. mnkeybsness
    Expand Collapse
    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. kkachurak
    Expand Collapse
    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. kkachurak
    Expand Collapse
    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. mnkeybsness
    Expand Collapse
    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. advocation
    Expand Collapse
    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. kkachurak
    Expand Collapse
    thread starter macrumors regular

    Joined:
    Jun 26, 2007
    Location:
    Orlando, FL

Share This Page