How to add a 1px wide background image at top and bottom?

Discussion in 'CSS' started by campolar, May 2, 2009.

0
  1. #1
    I guess this is a simple css question. How to do it, has slipped out of my mind.

    The question is easy, how can i add an image at the top AND bottom which is 1px wide, but longer in height, and want it to strecth in width according to user's window...

    So there is an image at the top AND at the bottom, which strecthes with the users window...

    I think css coders can understand what i'm asking here...
     
    campolar, May 2, 2009 IP
  2. CrazyJugglerDrummer

    CrazyJugglerDrummer Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You could insert the image, and position it absolutely relative to the body, with a top: 0px; to get it to be on the top of the document. Do the same with bottom for the image, and then set both of their widths to 100% to fill the whole screen. Just make sure they're inside the body and not some other element. You could use background-repeat: repeat-x, but I think you want to just stretch the image.
     
    CrazyJugglerDrummer, May 2, 2009 IP
  3. hkmike

    hkmike Peon

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Don't use absolute positioning, use relative and then use "top: 0px ;" and "bottom: 0px ;"
     
    hkmike, May 2, 2009 IP
  4. campolar

    campolar Peon

    Messages:
    2,683
    Likes Received:
    244
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I told wrong that i wanted it strectched...i wanted it repeated. I got the top one working, but if i use top, it wont use bottom...

    here's my code:
    
body {background-image: url(../Images/bg_top.jpg); position: top; background-repeat: repeat-x;}

body {background-image: url(../Images/bg_bottom.jpg); position: bottom; background-repeat: repeat-x;}
    Code (markup):
     
    campolar, May 2, 2009 IP
  5. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Two things:
    First, the second declaration is going to override the first declaration. Thus, only the bottom image will show up. You'll need to use another element (ie: a div) to have two bg images.

    Second, the syntax is a bit off. Instead of "position:top", you should use "background-position:top". Or, a shorthand declaration would look like this:
    body{background:url('../Images/bg_top.jpg') top repeat-x;}

    Hope that helps! :)
     
    katendarcy, May 2, 2009 IP
  6. campolar

    campolar Peon

    Messages:
    2,683
    Likes Received:
    244
    Best Answers:
    0
    Trophy Points:
    0
    #6
    ok, thanks katendarcy, but can u also tell how to add an image at the bottom? I need one at the top and at the bottom...can u tell the code please? :D
     
    campolar, May 2, 2009 IP
  7. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Well, what I'd recommend is using the second body declaration that you have, (modified as above), on a container div. I can't really say just how this would be, as I don't know the rest of your CSS. But, for instance:

    HTML:
    <body>
    <div id="wrapper">
    content
    </div>
    </body>

    CSS:
    #wrapper{background:url('../Images/bg_top.jpg') top repeat-x;}
    body{background:url('../Images/bg_bottom.jpg') bottom repeat-x;}

    Make sense?
     
    katendarcy, May 2, 2009 IP
    campolar likes this.
  8. campolar

    campolar Peon

    Messages:
    2,683
    Likes Received:
    244
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I am PMing you my CSS and HTML code, have a look in that and tell me...
     
    campolar, May 2, 2009 IP