Tempalte snippet for making a response image background to minimise download size using CE Image. #eecms

image_bg_css.html

{!--
	Template snippet image_bg_css.html
	This tempalte snippet is for making a response image background to minimise download size using CE Image.
	Usage: 
	{embed="include/image_bg_css" class="div-class" src="{image_url}" max="800"}
			   ^                           ^                ^      ^ 
			   |                           |                |      |
	location of this template         Class of div      URL of image    Max image size

	<div class="div-class"> This div has the background </div>
	
Needs CE Image and modified Math eecms addon here https://github.com/Patrick64/math
--}



<style>
	
	.{embed:class} {
		background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 1'  formula='568 * 1'}"});
	}

	@media (min-resolution: 2dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} *2'  formula='568 * 2'}"});
		}
	}

	@media (min-resolution: 3dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} *3'  formula='568 * 3'}"});
		}
	}





	@media (min-width: 569px){
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes'  max_width="{exp:math max='{embed:max} * 1'  formula='768 * 1'}"});
		}
	}

	@media (min-width: 569px) and (min-resolution: 2dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 2'  formula='768 * 2'}"});
		}
	}


	@media (min-width: 569px) and (min-resolution: 3dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 3'  formula='768 * 3'}"});
		}
	}

	@media (min-width: 769px){
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 1' formula='1024 * 1'}"});
		}
	}

	@media (min-width: 769px) and (min-resolution: 2dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 2' formula='1024 * 2'}"});
		}
	}

	@media (min-width: 769px) and (min-resolution: 3dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 3' formula='1024 * 3'}"});
		}
	}


	@media (min-width: 1025px){
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 1'}' formula='1366'}"});
		}
	}

	@media (min-width: 1025px) and (min-resolution: 2dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 2' formula='1366 * 2'}"});
		}
	}


	@media (min-width: 1025px) and (min-resolution: 3dppx) { 
		/* styles for Retina-type displays */
		.{embed:class} {
			background-image:url({exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' max_width="{exp:math max='{embed:max} * 3' formula='1366 * 3'}"});
		}
	}

</style>