Use large background images in Blogger

So I've been having fun setting up my new blog page and I came across a problem. The background image I wanted to use simply didn't look much good if I compressed it down to the 300KB that blogger limits you too. So here's how to get around it.

1. Host your image somewhere else. I chose Google Drive

2. Get a direct link to the image. In the case of Google Drive I simply needed to set the sharing permission to be "Anyone with a link" and then the URL takes the form of http://drive.google.com/uc?export=download&id=ID where ID is simply the file ID. You'll see it in the URL of the page when you open the file in Google Drive. Its long and has lots of letters and numbers in it and its usually at the end or near the end of the URL

3. Edit the HTML of your template using Bloggers HTML editor

4. Up near the top look for some code like this.
<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="#111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="$(color) url(http://drive.google.com/uc?export=download&id=0B5_ZrqX_KXcOb0Zoc1Rxay1DZ1k) repeat fixed top left"/>

5. All you need to do now is replace the URL at the end inside the brackets with the one you generated in step 3.

6. Hey Presto now you can make your background image as nuts as you like. Just remember if you make it too big it will take a long time to load especially on mobile devices.