CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Tommy K
Tommy K

Reputation: 1817

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

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?

Upvotes: 12

Views: 73991

Answers (4)

blurfus
blurfus

Reputation: 14041

Media Queries - Bootstrap Grid

You could have something like this on your own CSS:

Update

Following @DaveL17 's comment, the code has been updated for newer versions

i.e. changing image-url(...) to url(...) 

@media (max-width: 300px) {
  body {
    background-color: red;
    background-image: url("http://placekitten.com/g/200/300");
  }
}
@media (min-width: 301px) and (max-width: 600px) {
  body {
    background-color: blue;
    background-image: url("http://placekitten.com/g/400/600");
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  body {
    background-color: yellow;
    background-image: url("http://placekitten.com/g/500/768");
  }
}
@media (min-width: 769px) {
  body {
    background-color: green;
    background-image: url("http://placekitten.com/g/800/1048");
  }
}
<body>
  html body
</body>

Upvotes: 13

Shayan Faghihi
Shayan Faghihi

Reputation: 48

In order of implementing media queries, it is a better and more professional opinion that you use the tag directly into the HTML containing source tag for different screen size.

Please find below an example implementation of this methodology:

 <picture>
  <source srcset="small-image.jpg" media="(max-width: 375px)">
  <source srcset="main-image.jpg">
  <img src="main-image.jpg" alt="" style="width:auto;">
</picture>

Upvotes: 0

Anupam Basak
Anupam Basak

Reputation: 1523

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/

Upvotes: 33

Dylan L.
Dylan L.

Reputation: 1317

i do it like this using bootstrap. but Im sure it would work without bootstrap.

.class {
    background-image: image-url("beach.jpg") ;
    min-height:100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
}

Upvotes: 1

Related Questions