Question

我在这里找到了两个很好的例子，http://mattfarley.ca/#和https://popper.js.org/。

背景图片仅适用于他们的第一部分，但它可以响应任何拖动浏览器大小。我怎样才能做到这一点？

我的想法是使用Jquery获取当前大小，然后设置为背景部分？

提前致谢！

Answer 1

添加这些css并且不添加图像边距，高度和宽度。希望它有效

background-image: url(image_url_here);
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Answer 2

body {
    background-image: url( defaultBackground.png);
}

@media all and (max-width: 767px) {
    body {
        background-image: url( smartphoneBackground.png);
    }
}

首先在css文件中设置默认背景图像。之后，为具有媒体查询的智能手机设置了背景。

如何使用浏览器大小制作响应式背景图片

2 个答案: