SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict crabby80's Avatar
    Join Date
    May 2007
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Repeat background image

    Hi Guys

    I'm trying to repeat an image vertically in the body's background but it needs to start 1em from the top can this be done?

    I'm using this code but it just defaults to the top of the page?

    background:url(../images/background.gif) center 1em repeat-y;

    Any Ideas

    Thanks guys

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really given the way that you're doing it as even though you're moving the image down 1em, it'll still repeat vertically into that 1em gap you're trying to create.

    If you don't repeat the background image then I suspect the first instance of the background image will be exactly where you want it.

    The easiest way around this would probably be to nest another container <div> inside this area and then to apply a top-margin of 1em to create the space instead of the background position.

  3. #3
    SitePoint Addict crabby80's Avatar
    Join Date
    May 2007
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for your reply, I better have a re-think

    Cheers

    Crabby

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would padding applied to the internal edges not force the repeat to stay clear by 1em?

    or could you not make your background image the full width of the window but leave a white border 12px wide on the left and right, repeat-y:repeat and as dave said use a top and bottom margin to achieve the white space
    Last edited by james_littler; Sep 26, 2007 at 07:43. Reason: cant spell

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_littler View Post
    would padding applied to the internal edges not force the repeat to stay clear by 1em?
    Nope, the structure of the box-model dictate that the background-image would ignore the padding and only content would be affected by the padding hence only margin or border would affect the background image.

    Quote Originally Posted by james_littler View Post
    or could you not make your background image the full width of the window but leave a white border 12px wide on the left and right, repeat-y:repeat and as dave said use a top and bottom margin to achieve the white space
    If it needs to repeat-y; then presumably the height will be dictated by the content. For something like this the best approach would be to add an extra div nested inside with a 1em top-margin.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'm using this code but it just defaults to the top of the page?
    That's not correct exactly

    When you repeat a background image it is repeated along the axis described but it is repeated in both directions. So if you say repeat-y then the image is repeated along the y-axis in both direfctions (up and down.) If you specify no position for the image then it starts at the top and work downwards. However if you specify a position of 1 em (as in your example) the the image is first placed at the 1 em position and then it is repeated up and down in both directions along that axis.

    I hope that explains what's going on for you. As Dave said above you will have to nest another container to make some sort of gap or use another element to cover up what you don't want to see.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If its just for an illusion then you could add a 1 em border to the body in the background colour and then the image would appear to start down the page.

    e.g.
    Code:
    * {margin:0;padding:0}
    body{
        border-top:1em solid #fff;
        background:#fff  url(bg.jpg) repeat-y 0 1em;
    }

  8. #8
    SitePoint Addict crabby80's Avatar
    Join Date
    May 2007
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your replies guys I'll check it out


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •