Professional CSS3

Retina problems

Retina is the high-resolution display. The only problem with this display is how to double the device width and height and then squeeze it into the keeping container. This sounds easy. The easiest way is to move as many elements as can be moved to fonts and HTML elements/pseudoelements. But how can we deal with background images in CSS?

Let's start with the basics. For a normal screen, we need the image with standard dimensions. The image width and height are equal to 90 pixels.

HTML:

<div class="element"></div>

SASS:

.element
  background:
    image: url(img/circle-blue.png)
    repeat: no-repeat
  width: 90px
  height: 90px

Complied CSS:

.element { background-image: url(img/circle-blue.png); background-repeat: no-repeat; width: 90px; height: 90px; ...