SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image and opera issue

    Hello,

    HTML Code:
    body{
    	overflow-x: hidden;
    	width: 100%;
    	background: url(texture.png) fixed;
    }
    #wrapper {
      	position: relative;
    	background-color: #fff;
    	overflow-x: hidden;
    	width: 100%;
    	max-width: 40em;
    	margin: 25px auto;
    }
    In Opera, there's a 25px white line where the texture.png img does not appear. How come?

    Best

    Last edited by Paul O'B; Sep 18, 2011 at 07:43. Reason: changed to html tags as code tags are broken

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Good question. Without seeing the rest of the code, it's difficult to know what the problem is (or at least, it is to me, there might be cleverer people around who can tell just from that) – if you can post a link to a page where you're seeing that happen, we'll have a better chance of figuring it out.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the '.png' to uppercase to see if it worls. I've had a similar problem before.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Body in Opera wraps the element the moment you set an overflow state NOT stretching to full height automatically - setting margin on the inner element then exacerbates that collapse.

    Try padding body instead of margin on the child element.

    Though I have to ask, what's with the overflow-x and width:100% on body? Just TRYING to remove the ability for people with screens smaller than your design's ability to access it or something? I'd axe both of those settings on BODY... that max-width is a bit of a head scratcher too given that's... 640px for 96dpi and
    800px for 120dpi... really tiny stripe -- is this from a mobile sheet?

    NOT that I'd try to use fixed on a background image either -- given what it does when you try to scroll the page in FF.

    Could we see the page this is for? I've got the feeling you're over-thinking your solutions -- but again CSS without the HTML it's applied to is most always gibberish... and snippets are like doing brain surgery over a time-phone to 1876.


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
  •