#1
  1. No Profile Picture
    Give peace a chance.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    Buenos Aires, Argentina
    Posts
    83
    Rep Power
    14

    Question backgrounds and CSS


    I would like to have a background repeated in the x axis and padded in the y axis, I've take a look at the specs
    but I couldn't find how to do the padding part, is it posible ?
    Thank you.
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    body {background-repeat:repeat-x; background-position:0% 50%;}

    = 0% on the x axis (ie far left)
    and 50% on the y axis (center)
  4. #3
  5. No Profile Picture
    Give peace a chance.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    Buenos Aires, Argentina
    Posts
    83
    Rep Power
    14

    Unhappy that won't do it


    That won't do it, maybe I didn't express myself correctly, what I wanted to do is stretch the background vertically and repeat it horizontally, I think it's not posible with CSS2.
    Carpe diem
  6. #4
  7. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    25
    Ahh, stretch it.

    I don't think you can do it, but there is a possible alternative:

    create a <div> that is 100% height and 100% width, positioned absolutely 0/0. Create another <div> the same 100% width/height, pos 0/0, but make this higher in the z-index, and give it a background-color of transparent. Put all your page content in the second <div>. The first <div> now essentially acts as the page background.

    Using Javascript
    Calculate how many images you are going to need horizontally to fill the screen. And put that many into the background <div>. Calculate the page height in pixels and set all the images in the background <div> to that height.

    You should now have what you were after...

IMN logo majestic logo threadwatch logo seochat tools logo