Background image width not 100% on iPad

Question

My background images have not been spanning the full width of the browser when viewed on an iPad. This has happened more than once now, so it must be in the way I'm writing the CSS.

Here is an example of a footer whose bg image is stopping about 70% of the way on iPad- it has three columns floating within.

I've put the full project up 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 that I'm missing?

Solution 1

I tried using the suggestion above i.e. min-width:1024px in the body tag but it did not work. After a lot of searching I discovered adding it to the html tag also works.

Example:

html {
    min-width: 1024px;
    }

Solution 2

Pretty sure iPad screen width is 1024px. Is that set anywhere?

body{
 min-width:1024px;
}

Note: I've not got mine on me to test.

Comments

[SpaceBeers]

I'll have a look when I've next got my iPad on me.

[danwellman]

I had this same problem, I added min-width:1024px to the body and it fixed the problem