safary and mobile browsers, not supporting full-background image

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

Tablets tend to have quite high pixel densities, so perhaps your image has too-low a resolution to look good. You may have to define 'weird' for us. — shennan, Nov 27 '15 at 14:33

score 2 · Accepted Answer · edited May 23 '17 at 11:59

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.

score 2 · Answer 2 · answered Nov 27 '15 at 14:49

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.

Well, the image has 4K resolution... so the resolution is crystal clear..But thank you, now i understand, you are pretty good :) — David Stančík, Nov 27 '15 at 15:16
@PetrCihlar if you can be sure that the image has a 4K resolution, then my answer won't be relevant. Although I guess it is informative. — shennan, Nov 27 '15 at 15:18

safary and mobile browsers, not supporting full-background image

2 Answers2