2

This code is of a simple background image but shows 3 images when seen through the mobile browser

body {
background-image: url('image-1.jpg');
width: 500px;
height: 600px;
position: relative;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url('image-2.jpg');
  }
}

Please suggest changes to make the image fit to the screen

Cheslab
  • 1,896
  • 2
  • 17
  • 27
arnab chattopadhyay
  • 21
  • 2
  • 1
    It's not clear what are you trying to achieve. Anyway if you want a webpage to be responsive - do not set `width` and `height` in pixels. And btw, I can see only 2 of 3 images in your code. Please rephrase your question. – Cheslab Dec 20 '15 at 09:02

2 Answers2

0

Your css would only change the background image of the body, which I assume is not the behavior you are seeking. In order to have a better responsive design you'll need to set your body dimensions in percentage it something like this width:100vw; height:100vh; which might give you the behavior you are seeking.

Oubai Abbasi
  • 111
  • 1
  • 8
  • ya thats what i am looking for will that work for all screen sizes? – arnab chattopadhyay Dec 21 '15 at 11:45
  • Adding this would make your 'body' take the full size of the screen, this would allow your code to run on all screen sizes. You can use @media tags in case you want to use a completely new image as background for different screen sizes. – Oubai Abbasi Dec 21 '15 at 13:15
0

Just modify your code like this:

@media only screen and (max-width: 767px) {
  body {
    background-image: url('image-2.jpg');
    background-size: cover;
  }
}

And it will work again.

Paradoxetion
  • 706
  • 2
  • 11
  • 30