Stuck on background image repeating as webpage enlarges

Discussion in 'HTML & Website Design' started by kevint, Jun 2, 2006.

0
  1. #1
    Heres what i'm working on:

    http://www.lifelinepilots.org/pilothome.shtml

    css file-
    http://www.lifelinepilots.org/pilot.css

    As you can see my background image I tried putting in a div, and the content would be in that div, so when the page enlarges it will adjust accordingly. I have something in the wrong place, or i'm missing something. I'm somewhat of a newbie to CSS, so any help would be greatly appreciated.

    thank you
    kt
     
    kevint, Jun 2, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Unless you declare no-repeat, that's what background images do, tile.

    cheers,

    gary
     
    kk5st, Jun 2, 2006 IP
  3. z00pedup

    z00pedup Peon

    Messages:
    326
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    body {
    background-repeat: no-repeat;
    }

    Just set that as you want
     
    z00pedup, Jun 2, 2006 IP
  4. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Two questions...

    1.) What exactly are you trying to do here? Are you trying to repeat/tile the background image or not repeat/tile the background image? It's unclear from your question.

    2.) You have a number of div's on your page. Which one are you talking about exactly? Are you talking about this one...

    #background {
    z-index: 10;
    width: 780px;
    background: url(images2/background_16.jpg);
    top: 300px;
    height: 400px;
    }

    or this one...

    #container {
    position:relative;
    margin:0 auto;
    width: 780px;
    background: url(images2/background_16.jpg);
    height: auto;
    }

    You already seem to know about the various background repeat attributes as you've used them on other div's here...

    background: url(images2/lifeline-level3_12.gif) no-repeat;

    and here...

    background: url(images2/m6.gif) repeat-x;

    So I'm not quite sure what you're asking.

    Oh, and also what do you mean by 'adjust accordingly'? Do you mean the background image will repeat as the page gets larger? Or do you mean that the size of your div will become larger and the content inside will become larger but the background image will remain in place? Or are you talking about image enlargement? In other words, are you asking if it's possible for an background image to be enlarged (scaled up) as the page resizes? I'm very confused here... :confused:
     
    brian394, Jun 2, 2006 IP
  5. TechnoGeek

    TechnoGeek Peon

    Messages:
    258
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Using CSS, a background image can be specified by:

    BODY { background-image: url(/images/foo.gif) }

    The image can be made to repeat or not using "background-repeat":

    BODY { background-image: url(images/foo.gif);
    background-repeat: repeat }

    The "repeat-x" value will repeat the image horizontally while the
    "repeat-y" value will repeat the image vertically. If you don't the
    image to be repeated, you must specify "no-repeat".
     
    TechnoGeek, Jun 4, 2006 IP