Background image width is not 100% on iPad

Question

My background images do not cover the entire width of the browser when viewed on an iPad. This happened more than once, so it should be the way I write CSS.

Here's an example of a footer whose bg image stops at about 70% of the iPad path - it has three columns floating inside.

I put the whole project here: https://github.com/christineh/TJ-portfolio

HTML:

<footer> <div class="footer_invs"> <div class="footer"> <h1></h1> <p></p> </div> <div class="footer"> <h1></h1> <img src="" width="32" height="32" border="0"> </div> <div class="footer3"> <h1></h1> <img src=""> </div> </div> </footer> 

CSS

 footer { background: url(images/footer/background.jpg) repeat-x; width: 100%; height: 113px; margin-top: 250px; overflow:hidden; overflow-x:hidden; } .footer_invs { background: url(images/footer/corner.png) no-repeat 186px 0px; width: 1018px; height: 78px; padding-left: 200px; padding-top: 32px; } .footer { float: left; width: 275px; } .footer h1 { padding-bottom: 8px; } .footer p { color: #FFF; padding-bottom: 0px; line-height: 16px; padding-top: 0px; } .footer img { padding-right: 10px; } .footer3 { float: left; width: 120px; padding-left: 70px; } .footer3 h1 { padding-bottom: 8px; } 

Is there an obvious fix I'm missing?

Answer 1

I tried using the sentence above ie min-width: 1024px in the body tag, but that didn't work. After a lot of searching, I found that adding it to the html tag also works.

Example:

 html { min-width: 1024px; } 

Answer 2

Pretty sure iPad screen width is 1024 pixels. Is it anywhere?

 body{ min-width:1024px; } 

Note. I do not have my test.