<!--S:Main-->style='{IMAGE} {COLOR}' <!--E:Main-->

<!--S:ParticlesJS-->
	<span class="{EXTRA_HTML_CLASS} background background-particles {OVERLAY}" data-path='upload/backgrounds/{IMAGE_ID}.json'></span>
<!--E:ParticlesJS-->

<!--S:Image-->
	<span class="{EXTRA_HTML_CLASS} background background-image background-{IMAGE_ID} {OVERLAY}" style='background-image: url("upload/backgrounds/{IMAGE_ID}.jpg"); -webkit-background-size: {IMAGE_IMG_SIZE}; background-size: {IMAGE_IMG_SIZE}; background-position: {IMAGE_IMG_POSITION_X} {IMAGE_IMG_POSITION_Y};	background-attachment: {FIXED}; {COLOR}; background-repeat: {IMAGE_IMG_REPEAT}'></span>
<!--E:Image-->

<!--S:Parallax-->
		<span class="{EXTRA_HTML_CLASS} background background-parallax background-{IMAGE_ID} {OVERLAY}">
			<div class="background-parallax-inner section centered-content dzsparallaxer auto-init out-of-bootstrap " data-options='{ settings_mode: "{IMAGE_PAR_MODE}", mode_scroll: "{IMAGE_PAR_SCROLL}", direction: "{IMAGE_PAR_DIR}", animation_duration: "{IMAGE_PAR_SPEED}"}'>
				<div class="divimage dzsparallaxer--target" style="width: 100%; height: {IMAGE_PAR_SIZE}%; background-image: url(upload/backgrounds/{IMAGE_ID}.jpg)"></div>
			</div>
		</span>
<!--E:Parallax-->

<!--S:ImageColor-->background-color: rgba({R},{G},{B},{ALPHA});<!--E:ImageColor-->

<!--S:Color-->
	<span class="{EXTRA_HTML_CLASS} background background-solid background-{IMAGE_ID} {OVERLAY}" style="background-color: rgba({R},{G},{B},{ALPHA});"></span>
<!--E:Color-->

<!--S:Transparent-->
	<span class="{EXTRA_HTML_CLASS} background background-transparent background-{IMAGE_ID} {OVERLAY}"></span>
<!--E:Transparent-->


<!--S:Video--> 
	<span class="{EXTRA_HTML_CLASS} background background-video background-{IMAGE_ID} {OVERLAY}" data-vide-bg="mp4: upload/backgrounds/{IMAGE_ID}.mp4, poster:upload/backgrounds/{IMAGE_ID}.jpg" data-vide-options="posterType: jpg, loop: true, muted: true, position: 0% 0%" ></span>
<!--E:Video-->

<!--S:Slider-->
	<span 
		class="{EXTRA_HTML_CLASS} background background-slider background-{IMAGE_ID} {OVERLAY}" 
		data-images='{IMAGES}'
		data-transition="{IMAGE_SLIDER_TRANSITION}"
		data-traisition-duration="{IMAGE_SLIDER_TRANSITION_DURATION}"
		data-duration="{IMAGE_SLIDER_DURATION}"
		></span>
<!--E:Slider-->

<!--S:Gradient_horiz-->
	<span class="{EXTRA_HTML_CLASS} background background-solid background-{IMAGE_ID} {OVERLAY}">
		<style>
			.background-{IMAGE_ID} {
				background: {IMAGE_COLOR_START_A};
				background: -moz-linear-gradient(left, {IMAGE_COLOR_START_A} 0%, {IMAGE_COLOR_END_A} 100%);
				background: -webkit-linear-gradient(left, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				background: linear-gradient(to right, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{IMAGE_COLOR_START_IE}', endColorstr='{IMAGE_COLOR_END_IE}',GradientType=1 );
		</style>
	</span>
<!--E:Gradient_horiz-->

<!--S:Gradient_vert-->
	<span class="{EXTRA_HTML_CLASS} background background-solid background-{IMAGE_ID} {OVERLAY}">
		<style>
			.background-{IMAGE_ID} {
				background: {IMAGE_COLOR_START_A};
				background: -moz-linear-gradient(top, {IMAGE_COLOR_START_A} 0%, {IMAGE_COLOR_END_A} 100%);
				background: -webkit-linear-gradient(top, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				background: linear-gradient(to bottom, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{IMAGE_COLOR_START_IE}', endColorstr='{IMAGE_COLOR_END_IE}',GradientType=0 );
		</style>
	</span>
<!--E:Gradient_vert-->
<!--S:Gradient_diag1-->
	<span class="{EXTRA_HTML_CLASS} background background-solid background-{IMAGE_ID} {OVERLAY}">
		<style>
			.background-{IMAGE_ID} {
				background: {IMAGE_COLOR_START_A};
				background: -moz-linear-gradient(-45deg, {IMAGE_COLOR_START_A} 0%, {IMAGE_COLOR_END_A} 100%);
				background: -webkit-linear-gradient(-45deg, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				background: linear-gradient(135deg, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{IMAGE_COLOR_START_IE}', endColorstr='{IMAGE_COLOR_END_IE}',GradientType=1 );
		</style>
	</span>
<!--E:Gradient_diag1-->

<!--S:Gradient_diag2-->
	<span class="{EXTRA_HTML_CLASS} background background-solid background-{IMAGE_ID} {OVERLAY}">
		<style>
			.background-{IMAGE_ID} {
				background: {IMAGE_COLOR_START_A};
				background: -moz-linear-gradient(45deg, {IMAGE_COLOR_START_A} 0%, {IMAGE_COLOR_END_A} 100%);
				background: -webkit-linear-gradient(45deg, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				background: linear-gradient(45deg, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{IMAGE_COLOR_START_IE}', endColorstr='{IMAGE_COLOR_END_IE}',GradientType=1 );
		</style>
	</span>
<!--E:Gradient_diag2-->

<!--S:Gradient_radial-->
	<span class="{EXTRA_HTML_CLASS} background background-solid background-{IMAGE_ID} {OVERLAY}">
		<style>
			.background-{IMAGE_ID} {
				background: {IMAGE_COLOR_START_A};
				background: -moz-radial-gradient(center, ellipse cover, {IMAGE_COLOR_START_A} 0%, {IMAGE_COLOR_END_A} 100%);
				background: -webkit-radial-gradient(center, ellipse cover, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				background: radial-gradient(center, ellipse cover, {IMAGE_COLOR_START_A} 0%,{IMAGE_COLOR_END_A} 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{IMAGE_COLOR_START_IE}', endColorstr='{IMAGE_COLOR_END_IE}',GradientType=1 );
		</style>
	</span>
<!--E:Gradient_radial-->


<!--S:Split-->
		<span class="{EXTRA_HTML_CLASS} background background-split background-{IMAGE_ID} {OVERLAY}">
			<span class="background-split-side bs-xl-{IMAGE_SPLIT_SIZE} bs-lg-{IMAGE_SPLIT_SIZE_LG} bs-md-{IMAGE_SPLIT_SIZE_MD} bs-sm-{IMAGE_SPLIT_SIZE_SM} bs-{IMAGE_SPLIT_SIZE_XS} {LEFT_CLASS}">
				{LEFT_HTML}
			</span>

			<span class="background-split-side bs-xl-{IMAGE_SPLIT_SIZE_R} bs-lg-{IMAGE_SPLIT_SIZE_R_LG} bs-md-{IMAGE_SPLIT_SIZE_MD_R} bs-sm-{IMAGE_SPLIT_SIZE_SM_R} bs-{IMAGE_SPLIT_SIZE_XS_R} {RIGHT_CLASS}">
				{RIGHT_HTML}
			</span>

		</span>
<!--E:Split-->

<!--S:Youtube-->
	<span class="{EXTRA_HTML_CLASS} background background-youtube background-{IMAGE_ID} {OVERLAY}" data-video="{IMAGE_YOUTUBE}" data-start="{IMAGE_START}" data-volume="{IMAGE_VOLUME}">
		<div class="background-youtube-content background-youtube-content-{IMAGE_ID}"></div>
	</span>
<!--E:Youtube-->

<!--S:Kenburn-->
	<span class="{EXTRA_HTML_CLASS} background background-kenburns background-{IMAGE_ID} {OVERLAY}">
		<div class="background-ken-burns-content background-ken-burns-content-bg-{IMAGE_ID}"></div>					

		<style>
			.background-ken-burns-content-bg-{IMAGE_ID} {
				background-image: url(upload/backgrounds/{IMAGE_ID}.jpg); 
				animation: kenburns-bg-{IMAGE_ID} {IMAGE_KB_DURATION}s infinite;
				animation-direction: alternate;
				animation-timing-function: {IMAGE_KB_TRANSITION};
			}


			@-webkit-keyframes kenburns-bg-{IMAGE_ID}{
				0% {
					transform: scale3d({IMAGE_KB_SCALE}, {IMAGE_KB_SCALE}, {IMAGE_KB_SCALE}) translate3d(0px,0px,0px);
				}
				100% {
					transform: scale3d({IMAGE_KB_SCALE_TO}, {IMAGE_KB_SCALE_TO}, {IMAGE_KB_SCALE_TO}) translate3d(0px,0px,0px);
				}
			}

			@keyframes kenburns-bg-{IMAGE_ID} {
				0% {
					transform: scale3d({IMAGE_KB_SCALE}, {IMAGE_KB_SCALE}, {IMAGE_KB_SCALE}) translate3d(0px,0px,0px);
				}
				100% {
					transform: scale3d({IMAGE_KB_SCALE_TO}, {IMAGE_KB_SCALE_TO}, {IMAGE_KB_SCALE_TO}) translate3d(0px,0px,0px);
				}
			}
		</style>
	</span>
<!--E:Kenburn-->

<!--S:Scroller-->
	<span class="{EXTRA_HTML_CLASS} background background-scroller background-scroller-{IMAGE_ID} {OVERLAY}">
		<style>

			.background-scroller-{IMAGE_ID} {
				background-image: url(upload/backgrounds/{IMAGE_ID}.jpg); 

				animation-name: {IMAGE_SCROLL_DIR};
				animation-duration: {IMAGE_SCROLL_SPEED}s;

				{COLOR}
			}
		</style>	
	</span>
<!--E:Scroller-->

<!--S:ScrollerHover-->
	<span class="{EXTRA_HTML_CLASS} background background-scroller-hover background-scroller-hover-{IMAGE_SCROLL_DIR} background-scroll-hover-{IMAGE_ID} {OVERLAY}">
		<style>

			.background-scroll-hover-{IMAGE_ID} {
				background-image: url(upload/backgrounds/{IMAGE_ID}.jpg); 
				transition: all {IMAGE_SCROLL_SPEED_OUT}s linear;

				{COLOR}
			}

			.with-background:hover > .background-scroll-hover-{IMAGE_ID} {
				transition: all {IMAGE_SCROLL_SPEED}s linear;
			}

		</style>	
	</span>
<!--E:ScrollerHover-->

<!--S:Inverted-->inverted-colors<!--E:Inverted-->
<!--S:Normal-->normal-colors<!--E:Normal-->
