How to Change Background Image Based on Screen Size, Possibly with Bootstrap

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

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/

Changing height of background image according to screen size using bootstrap/css

do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.

<div class="img-responsive" style="width: 300px;height: 300px;">
    <img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
 </div>

Resizing background image with bootstrap

Here is how you use a responsive background image, divide height by width and multiply by 100. That will be your bottom padding. Then use cover for background-size: so it will stretch with the element.

header {  height: 80px;  background-color: gold;}.hero {  padding-bottom: 37.5%; /* = ( 600 / 1600 ) x 100 */  background-image: url( 'http://placehold.it/1600x600/A00' );  background-size: cover;}

<header></header><div class="hero"></div>

Bootstrap CSS/HTML background image resize

If I understand correctly, not sure, because the background-color do NOT shrink, but I think you mean that your Image should resize and the color should NOT appear like when it is now in full view. So If understand that correctly.

Change this:

background-size: 100%;

to

background-size: cover;

and add the browser's vendors to make it cross browser:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

See more info about background-size

---

Related Topics