If you want your background to repeat on both X and Y you should use just the background-repeat: repeat;
because by default it will repeat on both Axes.
EDIT
Ok I made a little research and found out that not all browsers support this form: background: url(img/bg1.png),url(img/bg.png);
like, IE8 doesn't support multiple backgrounds.
So, my suggestion is using multiple divs or tags and working your way on as well as making a separate mobile version for your website. For my website I use this piece of code:
<script>if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {window.location ="MOBILE-DOMAIN-NAME-HERE";}</script>
Which redirects the user to a mobile version of my website. Now, for the multiple divs, you could make something like this:
HTML
<div id="bg1"> content </div>
<div id="bg2"> content </div>
CSS
#bg1{
background: url(img/bg1.png);
background-repeat: no-repeat;
background-position: center -70px;
}
#bg2{
background: url(img/bg.png);
background-repeat: repeat;
background-position: top;
}