SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering a div so it lines up consistently w/image behind?

    I have a centered wrapper with a background image that partially flows over to the main bg...

    The problem is that the centering judders around between 1 pixel depending on whether the window size is an odd or even number of pixels (I assume that's what's going on.. it makes sense for that to happen).

    I am just not sure if there's any way for the centered div to always line up precisely with the main background based on the nature of centering things.

    the code i have is like so:
    Code CSS:
    body {
    background: #e1e1e1 url(images/bggrad.gif) repeat-x top;
    }
     
    #bg {
    	background: url(images/bg.jpg) top no-repeat;	
    	min-height: 100%;
    	width: 100%;
    	overflow: hidden;
     
    }
    #wrapper {
    	margin: 108px auto 20px;
    	width: 809px;
    	background: #FFF url(images/bg.jpg) -172px -108px no-repeat;
    	overflow:visible;}

    Hope that made sense!

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

    The FAQ documents this problem and has a couple of fixes that you may want to try first.

    The sure way to fix it is not to use the body element but use a page wrapper of appropriate width to hold the background image but does depend on size and on how things are matching up.

    If the faq doesn't help then post a link so we can see what's what

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool i'll have a look into that.. thanks!
    the faq mentions this happening only in IE though for me it is happening in firefox but it seems to be slightly different as i'm not really tiling anything.. although maybe I am. I don't have the site online as of now but if i can't get it working with that I'll pop it up

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have a tiling image on teh <body> .

    And try removing the image on the <body> and using the fix described in the FAQ before we even try debugging . That's probably it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok right.. the tiling image is just a bit of a gradient tiling horizontally..
    the problem i'm having is with the image on the #bg and the #wrapper, which I want to line up, but jogs back and forth when i re-size the window in any browser.. neither are on the body element. I did try adding padding to the body anyway but it didn't affect anything..
    here is the culprit so you can see what I'm talking about. I know there are some other issues with the code there and I might end up rejigging things a bit.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    I could hardly notice the jog so I may be looking at the wrong thing. Anyway try this and see if it makes a difference:

    Code:
    #bg {
        background: url(http://ctrlshiftweb.com/verve/images/bg.jpg) 50&#37; top no-repeat;    
        min-height: 100%;
        overflow: hidden;
       width:auto;
        min-width:808px;
        padding:0 0 0 1px;    
    }
    * html #bg{height:100%}


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
  •