css - Hide background image using Media Queries -

css - Hide background image using Media Queries -

i'm attempting remove background image when people view site on mobile devices.

here's code.

html:

<section id="build"> <div class="img_contain col-xs-8"> <img src="assets/images/rocks_bg.png" "> </div> <div class="column-right col-xs-4 "> <h1>build</h1> <p> bla bla bla </p> </div> </section>

css:

#build { background-image: url('../images/buildbg.png'); margin: 0 auto; text-align: left; padding-top: 40px; background-color: #d89330; }

is possible hide background image using media queries? understand hide elements divs, paragraphs etc etc, haven't seen info on hiding background image media queries.

you can utilize media query disable bacground in low resolution screens.

try values needed:

@media screen , (max-width: 599px) , (min-width: 600px) #build { background-image:none; } }

you have adjust attributes depending on device!

also take @ blog post tim kadlec walks through various scenarios conditionally displaying background image.

css media-queries background-image media