Whats up people

So i have been trying to figure out how can i make the background be the size as the content. I am using a canvas as a background.

Since i am making a j-query mobile, the content is not alot and the background goes below the footer and it looks a lot weird.

Please suggest how can i fix it. Blow is the screen shot
Thank you
926a82d7e14f017a1eb399145032f98f

Have you considered pushing the footer down, aka "sticky footer"? The background is going to fill the display so I think the best approach is to have the footer move to the bottom.

Here is a link to an online example: Pushing a Footer to the Bottom of a Web Page

Do you want to put the footer at the extrem bottom ?
if yse:
change:
<body> => <body style="position:relative;">
<footer> => <footer style="position:absolute;bottom:0px;"> (maybe you are using DIV for the footer, if so do the same but footer become div)

Thanks for replying, I tried using your suggestions but it did not work with j-query mobile although it works with the normal html website. Since i code HTML pages, your suggestion will help alot. It is pretty neat.

After searching for "Sticky footer for mobile j-query", i found the solution. I lost the link but following is the code:

<style type="text/css"
    [data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%; height:auto;}
</style>