Setting a Cover image responsive on high density displays

Question

I have one serious problém. I did not found the solution yet, so i hope you know.

I am doing websites. I need to make responsive cover background image.(that covers whole page). I started with:

/* Location of the image */
  background-image: url(main.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;

This code just works, even if i resize the window and so.. So it is very well. But problém appears on height-resolution screens, like iPad or iPhone. There, the image is very very zoomed and kinda pixeled or unfocused. I thought, it is because low image resolution, but than i realised, that the image is nearly 5K. I want to make it responsive like on this site

Any help be good, need to solve it quickly!

Thanks

what does this have to do with SEO? Also can you share a demo? — Aziz, Feb 03 '16 at 22:38
Could have something to do with retina, see this https://erikrunyon.com/2010/10/retina-display-and-css-background-images/ — RPL, Feb 03 '16 at 23:18

score 1 · Accepted Answer · edited May 23 '17 at 10:30

You can create a media query in CSS to manualy configure the background-image on retina displays (or other high-resolution screens).

See CSS-tricks.

Mediaquery retina displays:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

And more furute proof:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { ... }

Questions:

Also see this post for a same question/answer.

Not exactly what i want... I need to use same image on pc and on mobile :/ — David Stančík, Feb 08 '16 at 18:26

score 0 · Answer 2 · edited May 23 '17 at 11:55

It's because you are using background-attachment:fixed - for whatever reason this when used with background-size: cover on iOS causes this behavior. So if you add the following it should be resolved:

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

Solution from here on SO.

Setting a Cover image responsive on high density displays

2 Answers2