Problem with large background website on iOS devices and some browsers

[103734]

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

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?

 

[angelwatt]

Can you better define "weird stuff?" I'm not sure what I should be looking for.

 

[103734]

when you make the browser window smaller than the page the bottom of the background separates from the rest of the background

 

[angelwatt]

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.

 

[103734]

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.

 

[angelwatt]

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.