Is there any ratio for Responsive Full Background Image

Question

Is there any aspect ratio that needs to be considered for full background responsive image? Image size is 1361 x 1216. Original Image

Below is the CSS used,

body{
background-image:url('../images/bg-img.jpg');
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: contain;
  }

But the result is background-size: contain

If background-size: cover is used the top and bottom portion of the image are cropped.

Answer 1

This should do the trick ;)

body {
    background-image:url('../images/bg-img.jpg');
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: 100% auto;
}

background-size: WIDTH HEIGHT;

---

EDIT: you could do something like this:

body{
background-image:url('https://i.sstatic.net/vLd20.jpg');
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
@media(min-width: 768px){
  body {
    background-size: 100% auto;
  }
}
@media(max-width: 767px){
  body {
    background-size: 100% 100%;
  }
}

Codepen: http://codepen.io/anon/pen/BpJWOR

Note that "100% 100%" will stretch the background disproportionately. you can use "auto 100%" instead at the "max-width 767px section"

You could also experiment with 110% or higher. just keep trying until it gets the perfect look... welcome to responsive webdesign :P