safary and mobile browsers, not supporting full-background image - html

Question

I am making a website, for my client.
Now, the website has background-image, on it's landing page, that looks very nic in all pc browsers, but there is one problem...
If you are not using google chrome, on all tablets and phones, it will make the background-image look very zoomed, and weird.
There is code(for css background-image, it should be responsive, but it is not in many browsers):
body {
height: 100%;
font-family: 'Open Sans';
font-weight:100;
color:#666666;
line-height: 1.7em;
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
Link to the website

Answer 1

Unfortunately background-attachment: fixed and background-size: cover don't work well together.
See this question and its highest voted answer. (Just in case the question might not be there in the future, here is the answer)
Unfortunately this is simply an artifact of how fixed positioning
works in CSS and there is no way around it in pure CSS - you have to
use Javascript.
The reason this happens is due to the combination of
background-attachment: fixed and background-size: cover. When you
specify background-attachment: fixed it essentially causes the
background-image to behave as if it were a position: fixed image,
meaning that it's taken out of the page flow and positioning context
and becomes relative to the viewport rather than the element it's the
background image of.
So whenever you use these properties together, the cover value is
being calculated relative to the size of the viewport irrespective of
the size of the element itself, which is why it works as expected when
the element is the same size as the viewport but is cropped in
unexpected ways when the element is smaller than the viewport.
To get around this you basically need to use background-attachment:
scroll and bind an event listener to the scroll event in JS that
manually updates the background-position relative to how far the
window has been scrolled in order to simulate fixed positioning but
still calculate background-size: cover relative to the container
element rather than the viewport.

Answer 2

Because phones are usually held in the palm with their greatest length going vertically (unlike desktop computers where they are mostly horizontal in length) the use of background-size: cover; might be exposing your image as a low-resolution image.
If the image is having to be scaled up to 'cover' your browser window, it may be having to pixelate the image, especially if the device has a very high pixel-density.
This image demonstrates the issue:
The solution to this problem would be to improve the resolution of your image.
Note that the issue would be most prominent if your desired background image was landscape in nature. If it was portrait, you may find the extremities of this problem to be reversed.