WordPress : Make a background image responsive

1 Views

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.

Read More

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

Post Views: 1

Related posts

Leave a Reply

1 comment

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