Question

我把它放在一起，在网站的左侧和右侧显示背景。

现在有了这个，身体容器看起来比以前宽得多。为什么会这样？

有人能看到下面不好的代码吗？

   div#multi-background {
        width: 100%;
        height: 100%;
        background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
        background-position: center right, top left;
        background-repeat: no-repeat;
    }

    @media only screen and (min-width: 481px) {
    //Happens when the screen size is >= 481px
     div#multi-background {
        width: 100%;
        height: 100%;
        background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
        background-position: center right, top left;
        background-repeat: no-repeat;
     }
    }

    @media only screen and (max-width: 481px) {
    //Happens when the screen size is <= 481px
     div#multi-background {
       background-image: none;
     }
    }

小提琴 - http://jsfiddle.net/timsalabim/1mk097vb/8/

Answer 1

如果我做对了，那就是你想要的代码：

#multi-background {
    height: 700px;
    background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
    background-position: center right, top left;
    background-repeat: no-repeat;
}

@media screen and (min-device-width: 481px) {
/*Happens when the screen size is bigger than 481px */
 #multi-background {
    width: 100%;
    background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
    background-position: center right, top left;
    background-repeat: no-repeat;
 }
}

@media screen and (max-device-width: 481px) {
/*Happens when the screen size is lower than 481px*/
#multi-background {
   background-image: none;
 }
}

<body><div id="multi-background"></div>

评论不是用“/ ”和“ /”写的。 @media声明和高度问题存在超过481像素的问题。

希望它有所帮助。

左和右右侧背景中的CSS更改了主体内容容器宽度

1 个答案: