Problem with large background website on iOS devices and some browsers

Discussion in 'Web Design and Development' started by 103734, Jan 26, 2011.

  1. 103734 Guest

    Joined:
    Apr 10, 2007
    #1
    I just started on the first site I completely made on my own and I have ran into my first problem. The site is www.sdvargas.com I have a large background image that needs to line up with the page content, the site loads fine in all web browsers except with firefox when I make the window smaller than the div wrapper weird stuff starts happening, and on iOS devices the background is just way to small.

    Here is the CSS for the background
    Code:
    body {
    	padding: 0;
      	margin: 0;
      	background: #000000 url("images/background.jpg") no-repeat center top;
    	width: 100%;
    	display: table;
    	}
    
    any way I could fix this?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Can you better define "weird stuff?" I'm not sure what I should be looking for.
     
  3. 103734 thread starter Guest

    Joined:
    Apr 10, 2007
    #3
    when you make the browser window smaller than the page the bottom of the background separates from the rest of the background
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    In the body CSS if you switch "center" to "left" on the background, I think it will give you want you want. I'm on a 13" MBP so my screen is always small. The navigation does overlap with the logo, even with my browser at the full width of my screen.
     
  5. 103734 thread starter Guest

    Joined:
    Apr 10, 2007
    #5
    Ok I fixed the problem with the logo and nav bar, and the problem with the background on iOS devices, the only problem I have now is that when you make the browser window smaller than the page that the background breaks under the footer. I attached a image with a red circle showing where the page breaks.
     

    Attached Files:

  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Is it still happening? I couldn't reproduce it with Firefox, but my 13" screen may not be big enough to see the problem. It looks like the background is only applied to the body tag, which to me would seem to indicate that this kind of break would be hard to produce.
     

Share This Page