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

前端未结

关注

 3  1951

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

相关标签:

3条回答

不要未来只要你来

2021-01-05 09:03

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;
}

0 讨论(0)

长发绾君心

2021-01-05 09:12

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/

0 讨论(0)

无人共我

2021-01-05 09:21

Media Queries - Bootstrap Grid

You could have something like this on your own CSS:

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

<body>
  html body
</body>

0 讨论(0)