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

css, twitter-bootstrap, twitter-bootstrap-3

Solution

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/

Problem

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. I have a different portrait orientated background I wish to use. Mainly, "portrait-orientated" in my case really just translates to mobile devices, not so much ipads/tablets. Mobiles are much more extreme with the difference between length and width so I want to link a different url in this case. Idk if there's any way I could use Bootstrap's .hidden-xs/.visible-xs to accomplish this, that's just me thinking out loud, but if someone has a solution using this I'd be more than happy to hear it. This also would help since I'm using Bootstrap's navbar which changes into a touchscreen navbar when `xs`, meaning <768px, So I'd like to only change the background image when the navbar changes. So any ideas? I'm a total newbie at this point, this is my first real project that isn't just isolated snippets. This might be something for Java but idk. I'd love any and all help. Also a quick semi-related question, how do I handle `background-position: center (-50px from the top)`. Should I just take the picture I want to use and add 50px of whitespace on top with paint or whatever then upload that? Or is the a way to set this is CSS?

Original source