Ionic Side Menu with Background. Scale the Background?

I am using Ionic and Angular to build mobile Applications. I am now using Ionics sidemenu with a background:

.menu.menu-left {
    background-image: url('../img/menu_background.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

The Application can run on different screen sizes from smpartphones over tablets to desktops so i need to provide different image sizes.

Do i have to provide an image for each display size or can i somehow resize the background image on startup and set the resized version to be the background?

You could try @media css to display different image per view. For example:

@media screen and (max-width: 1199px) {
   .menu.menu-left {
     background-image: url('../img/menu_background.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50%;
     background-attachment: fixed;
   }
}

@media screen and (max-width: 767px) {
   .menu.menu-left {
     background-image: url('../img/menu_background_2.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50%;
     background-attachment: fixed;
   }
}

Or you could just sset correctly your css for the backgroung like that:

  .menu.menu-left {
     background-image: url('../img/menu_background.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50%;
     background-attachment: fixed;
   }