On [this page](http://festivals.ie/) I have 2 background images: 

(1) A blue sunburst that is set as a background image of `<html>`

```
html {
    background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
    outline: 0 none !important;
}

```

(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the [sticky footer](http://www.cssstickyfooter.com/) solution to make this stick to the bottom of each page

Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:

![enter image description here](https://i.stack.imgur.com/b9RAc.png)

and at the bottom

![enter image description here](https://i.stack.imgur.com/A0gMN.png)

of every page. Previously I used

```
background-size: cover; 

```

for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.