SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Pattern Clipping/Overflow Issues

    Hi,
    I'm having some background pattern issues - I wrote a write-up at http://grid9.quadspeedi.net/~plugged/css/.

    Hopefully someone will help me out,
    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sounds straight forward enough

    Just make a background image that is 1050 px wide and repeat it down the body using center top (or center center).

    There will be a 848px gap in the middle of your image and the gradient at each sides. Just make sure that some of the gradient goes under the page content because of ie's 1 pixel rounding bug. Dont try and make the background meet the edge of the content exactly.

    That will repeat the background down the whole page so you can just rub out the top and bottom of the page with some white borders or background colour in an empty element.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this.
    Code:
    	  body {
     margin: 0;
     padding: 0;
     text-align: center;
     background-image: url(file:///C|/Documents%20and%20Setting...es/pattern.png);
     background-repeat: repeat-y;
     background-position: center center;
    	  }
    	 .border {height:8px;overflow:hidden;background:#fff}
       #wrapper {
    Code:
      <body>
    	<div class="border"></div>
     <div id="wrapper">
    etc...............................	
    </div>
    	<div class="border"></div>
      </body>
    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    New Jersey
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! It works perfectly, but I didn't add the border divs, because I wasn't sure what those were for. Were those just to add margins to the body?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes just some body margins


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
  •