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

Answer 1

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:

• What are media queries?
• What is DPI?
• What is device pixel ratio?

---

Also see this post for a same question/answer.