Load images based on screen size in Boot Strap 3

Question

I am using Boot Strap 3 for my new responsive layout. For my home page I have background image. Please advise how to use different background images depending on screen resolution. I cannot use responsive class. Please use below URL to review the layout.

http://idea66.com/mobile/screenshot.png

If I create this structure for different screen type, how can we call them using Boot Strap 3.0

Thank you Monica

Answer 1

You can have CSS with media queries. Example:

@media (max-width: 979px) {

    body {
        background: white url(medium.jpg);
    }

}

@media (max-width: 767px) {

    body {
        background: white url(small.jpg);
    }

}