Hintergrundbilder auf kleineren Bildschirmen verstecken

Question

Ich habe einige große Hintergrundfotos, die ich nicht in kleineren Bildschirmen, mobilen usw. anzeigen möchte. Und ich möchte die Farbe als Hintergrundfarbe angezeigt werden.

Der Code ist

#search_container1 { 
position: relative; 
height: 500px; 
background: #4d536d url(../img/slide_hero.jpg) no-repeat center top; 
background-size: cover; 
color:#fff; 
width: 100%; 
display:table; 
z-index:99; 

ich versucht habe

@media (max-width: 768px) { 
#search_container1 { 
     background-image: none !important; 

    } 
} 

aber nicht funktioniert hat.

Wie kann der einfache Weg sein?

Answer 1

In der ersten Regel verwendeten Sie background, nicht background-image, aber Sie müssen es mit dem gleichen Parameter überschreiben.

So hat Ihre Medien Abfrage die background Parameter zu verwenden, auch, nur ohne das Bild:

@media (max-width: 768px) { 
    #search_container1 { 
     background: #4d536d !important; 
    } 
}