Background does not repeat on mobile browser

Question

I use 2 backgrounds, one as an image without repeating and the second with repeating in x and y axis. On PC it is all OK , but on mobile browsers the second image repeats on x axis only. this is my CSS code

    #bdy
   {   
    direction: rtl;
    width: 1200px;
    margin: 0 auto;
    background: url(img/bg1.png),url(img/bg.png);
    background-repeat: no-repeat,repeat;
    background-position:  center  -70px   ,  top ;
   }

So, what I should change to make it repeat on both x and y ?

Answer 1

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;
}