How to change background image based on screen size, possibly with Bootstrap

Question

I have an background-image:url on my body in CSS. The problem is when I transition into mobile devices where the screen becomes portrait orientated

Answer 1

Use @media queries to write window size specific css. Example:

@media (min-width: 400px) {
    .element {
        background: #cccccc;
    }
}

@media (min-width: 500px) {
    .element {
        background: #888888;
    }
}

@media (min-width: 600px) {
    .element {
        background: #222222;
    }
}

Here's is a Fiddle: http://jsfiddle.net/zhqn1vhh/