Skip to content

Instantly share code, notes, and snippets.

@elishaterada

elishaterada/retina-background-image.js

Last active August 25, 2018 07:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save elishaterada/b19e141270b105495e4d4e0f4109a280 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save elishaterada/b19e141270b105495e4d4e0f4109a280 to your computer and use it in GitHub Desktop.
Download ZIP
Retina background image
Raw
retina-background-image.js
import { css } from 'react-emotion';
const retinaBackgroundImage = (path) => {
const extension = path.substring(path.length - 3);
const file = path.substring(0, path.length - 4);
return css`
background-image: url(${file}.${extension});
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
background-image: url('${file}@2x.${extension}');
}
`;
};
export default retinaBackgroundImage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment