How can I use background color instead image in mobile?

[educainventions]

The x-section-1 has an image as background:

<div id="cs-content" class="cs-content"><div id="x-section-1" class="x-section center-vertically bg-image parallax" style="margin: 0;padding: 0;min-height: 100vh; background-image: url(http://www.edinventa.com/wp-content/uploads/2017/07/background-heromask-videogame.jpg); background-color: hsl(49, 100%, 63%);" data-x-element="section" data-x-params="{&quot;type&quot;:&quot;image&quot;,&quot;parallax&quot;:true}" ><div class="x-container resp-p" style="margin: 0 auto 0px;padding: 0px 5%;width: 100%;max-width: 1110px;" >

In mobile, I want to show the following single color background instead: #3c3a35;

Could you tell me a simple way to achieve this?

Thanks for your help… You are awesome!!!

Carlos

[mldarshana]

Hi There,

You can assign a custom class to your parent element so that it will look like
class="cs-content my-custom-class"

Then you can use a CSS rule as follows.

.my-custom-class {
  @media (max-width:480px) {
    background-image: none !important;
    background-color: red;
  }
}

Hope that helps.