如何根据屏幕大小更改背景图像,可能使用Bootstrap

时间:2015-02-24 19:23:35

标签: css css3 twitter-bootstrap twitter-bootstrap-3

我在background-image:url的CSS中有一个body。问题是当我转换到屏幕变为纵向的移动设备时。我想要使​​用不同的纵向背景。主要是,"肖像导向"在我的情况下,真的只是转换为移动设备,而不是ipads /平板电脑。由于长度和宽度之间的差异,手机更加极端,因此我想在这种情况下链接不同的网址。

如果我有任何方法可以使用Bootstrap的.hidden-xs / .visible-xs来实现这一目标,那我只能大声思考,但如果有人有解决方案的话使用这个,我很高兴听到它。这也有帮助,因为我使用Bootstrap的导航栏,当xs改变为触摸屏导航栏时,意味着< 768px,所以我只想改变背景图像时导航栏更改。

那么任何想法?在这一点上,我是一个新手,这是我的第一个真正的项目,不仅仅是孤立的片段。这可能是Java的东西,但idk。我喜欢任何帮助。

这也是一个快速的半相关问题,我该如何处理background-position: center (-50px from the top)。我应该只拍摄我想要使用的图片,并在上面添加50px的空白用油漆或其他任何内容然后上传它?或者是设置这个是CSS的方法吗?

3 个答案:

答案 0 :(得分:24)

使用@media查询来编写特定于窗口大小的css。例如:

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

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

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

这里是一个小提琴:http://jsfiddle.net/zhqn1vhh/

答案 1 :(得分:8)

Media Queries - Bootstrap Grid

你可以在自己的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>

答案 2 :(得分:1)

我使用bootstrap这样做。但我相信它没有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;
}