Background retina helper

List of the available mixins

Mixin name	Example	Code
backgroundRetina	Gist example	Source code
backgroundRetinaResponsive	Gist example	Source code
backgroundRetinaHdFull	Gist example	Source code
backgroundRetinaHdReady	Gist example	Source code
backgroundRetinaTabletLandscape	Gist example	Source code
backgroundRetinaTabletPortrait	Gist example	Source code
backgroundRetinaSmartphoneLandscape	Gist example	Source code
backgroundRetinaSmartphonePortrait	Gist example	Source code
iconRetina	Gist example	Source code
fillRetinaImage	Gist example	Source code

You can see the source code here.

===

####backgroundRetina

Sets a background-image for standard and retina resolution which changes with media query

Param	Default value	Required	Comment
@standardImage	none	yes
@retinaImage	@standardImage	yes
@backgroundSize	none	yes	The background-sizeshould be the same of standard image size
@rootPath	@root-path or ''	no	Frontsize var from app.less

Gist example

===

####backgroundRetinaResponsive

Sets a different background-image for every viewport from Full HD to Smartphone portrait, in standard and retina resolutions

Param	Default value	Required	Comment
@fullHdStandardImage	none	yes
@fullHdRetinaImage	@fullHdStandardImage	yes
@hdReadyStandardImage	@fullHdStandardImage	yes
@hdReadyRetinaImage	@hdReadyStandardImage	yes
@tabletLandscapeStandardImage	@hdReadyStandardImage	yes
@tabletLandscapeRetinaImage	@tabletLandscapeStandardImage	yes
@tabletPortraitStandardImage	@tabletLandscapeStandardImage	yes
@tabletPortraitRetinaImage	@tabletPortraitStandardImage	yes
@smartphoneLandscapeStandardImage	@tabletPortraitStandardImage	yes
@smartphoneLandscapeRetinaImage	@smartphoneLandscapeStandardImage	yes
@smartphonePortraitStandardImage	@smartphoneLandscapeStandardImage	yes
@smartphonePortraitRetinaImage	@smartphonePortraitStandardImage	yes
@backgroundSize	none	yes	The background-sizeshould be the same of standard image size
@rootPath	@root-path or ''	no	Frontsize var from app.less

Gist example

===

####backgroundRetina[viewport]

From backgroundRetinaHdFull to backgroundRetinaSmartphonePortrait

Sets a background-image for the specific viewport, in standard and retina resolutions

Param	Default value	Required	Comment
@standardImage	none	yes
@retinaImage	@standardImage	no
@rootPath	@root-path or ''	no	Frontsize var from app.less

Gist example

===

####iconRetina

Sets a background-image to be treated as icon background in standard and retina resolutions

Param	Default value	Required	Comment
@standardImage	none	yes
@retinaImage	@standardImage	yes
@width	none	yes
@height	@width	no
@rootPath	@root-path or ''	no	Frontsize var from app.less

Gist example

===

####fillRetinaImage

Sets a fill property to the background images for SVG generated HTML elements for standard and retina resolution which changes with media query

Param	Default value	Required	Comment
@standardImage	none	yes
@retinaImage	@standardImage	yes
@backgroundSize	none	yes	The background-sizeshould be the same of standard image size
@rootPath	@root-path or ''	no	Frontsize var from app.less

Gist example