Wordpress : Make a background image responsive

Question

Here's my wordpress : http://shopmanouchek.com

Everything is ok if you look at it in desktop mode but there's a problem in smartphone mode. The header image is not responsive.

Here's the code for the logo :

#header{
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center; 
}

I tried to add

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

It looks ok on my phone but now the logo in the desktop view is now completely oversized

Answer 1

Salman A above already mentioned media queries, here's a brief overview http://css-tricks.com/css-media-queries/

and an example of how that would work in practice

#header {
  background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
  background-repeat: no-repeat;
  background-position: center; 
}

@media all and (max-width: 480px) /*or whatever width you want the change to take place at*/ {
  #header {
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
   background-size: cover; 
 }
}