Background image om color Section mobile Problem

Hey,
I think I found a solution :)
I found this code here in the forum, which removes the background-image of the color section on mobile devices

@media only screen and (max-device-width: 1023px) 
{
	.avia-section
	{
		background-image:none!important;
		background-color: transparent;
	}

	.av-parallax.avia-full-stretch.active-parallax
	{
		background-image:none!important;
		background-color: transparent;
	}
}

I combined this with a CSS snippet I found on stackoverflow
(https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile)

I put several media-queries in my CSS to provide the background-image in different sizes.

for example

@media only screen 
and (max-device-width : 667px)
and (orientation : portrait) 
{	
	body:before 
	{
		content: "";
		display: block;
		position: fixed !important;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: url(<strong>image-url-01</strong>) no-repeat center center !important;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
}

@media only screen 
and (max-device-width : 667px)
and (orientation : portrait) 
{	
	body:before 
	{
		content: "";
		display: block;
		position: fixed !important;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: url(<strong>image-url-02</strong>) no-repeat center center !important;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
}

Maybe this is *a bit* amateurish ;) but it works for me – so long.
Thanks nevertheless – the theme is great!!!