css - Hide body background when mobile device detected -

css - Hide body background when mobile device detected -

body { background:url(../img/background_leftside.png), url(../img/background_rightside.png); background-position:left top, right top; background-repeat: repeat-y; background-attachment:fixed; word-wrap: break-word; }

i want when site accessed smartphone or tablet background not displayed.

use media queries concept this.

/* smartphones (portrait , landscape) ----------- */

@media screen , (min-device-width : 320px) , (max-device-width : 480px) { /* styles */ }

/* smartphones (landscape) ----------- */

@media screen , (min-width : 321px) { /* styles */ }

/* smartphones (portrait) ----------- */

@media screen , (max-width : 320px) { /* styles */ }

/* ipads (portrait , landscape) ----------- */

@media screen , (min-device-width : 768px) , (max-device-width : 1024px) { /* styles */ }

/* ipads (landscape) ----------- */

@media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) { /* styles */ }

/* ipads (portrait) ----------- */

@media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) { /* styles */ }

/* desktops , laptops ----------- */

@media screen , (min-width : 1224px) { /* styles */ }

/* big screens ----------- */

@media screen , (min-width : 1824px) { /* styles */ }

/* iphone 4 ----------- */

@media screen , (-webkit-min-device-pixel-ratio : 1.5), screen , (min-device-pixel-ratio : 1.5) { /* styles */ }

css