如何使我的固定背景响应？

编程问答 2022-06-02

问题描述

当我的网页响应时，我希望我的背景占据 ipad 视图上的所有空间。它适用于手机，但对于平板电脑它会切断并且图像不会占据整个空间。我认为这可能与我将我的一个媒体查询设置为 1024px 的最大宽度有关，但我不知道我是响应式设计的新手，而且它说我需要输入更多细节。希望所有这些都有意义。

<body>
            <div class="bg"></div>
        <header>
            <section class="title">
                <div class="title__step2">
                    <h1 class="title__head">Step 2</h1>
                </div>
                <div>
                    <h1>
                        Choose your City
                    </h1>
                    <p>Welcome to Step Number 2! You're almost there,just tell us which city you are interested in moving to and we can make it happen!</p>
                </div>
            </section>
        </header>
        </body>

    * {
        -webkit-Box-sizing: border-Box;
                Box-sizing: border-Box;
    }
    
    body {
        background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
        margin: 0;
        background-repeat: no-repeat;
        background-size: cover;
        height: 95vh;
    }
    
    :root {
        --main-color: rgba(255,111,15,0.8)
        
    }
    
    .title {
        margin-top: 2.5%;
        margin-left: 12.5%;
        text-align: center;
        border: 2px solid black;
        width: 75%;
        background: var(--main-color);
        color: white;
        font-family: 'Roboto',sans-serif;
        font-size: larger;
    }
    
    .title__head {
        width: 100%;
        margin-top: 0;
        padding-top: 7px;
        padding-bottom: 7px;
        background: white;
        color:  var(--main-color);
        font-family: 'Roboto',sans-serif;
    }

@media screen and (max-width: 1024px) {

    .bg {
    background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    }
    

    .title {
        margin-top: 2rem;
        margin-left: 1rem;
        width: 21.5rem;
    }

    #cards {
        display: flex;
        flex-direction: column;
    }
    .cards__medimage,.cards__bogimage,.cards__santaimage {
        width: 310px;
        height: 200px;
    }

    .cards__med,.cards__bog,.cards__san {
        height: 32rem;
        width: 21.5rem;
        margin-bottom: 4rem;
        border: 4px black solid;
        margin-left: 1rem;
    }

    .cards__med:not(:hover) .choice,.cards__bog:not(:hover) .choice,.cards__san:not(:hover) .choice {
        display: inherit;
    }

    .choice {
        margin-top: 0;
        margin-left: 2.75rem;
    }
    
    

    @media only screen and (min-width: 660px) and (max-width: 1024px) {
        .bg {
            background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: -1;
            }
    }

解决方法

我想我有你要找的东西：

首先：从你的 html 和 css 中删除你的 .bg 元素（你不需要它）

然后： 替换：

body {
    background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 95vh;
}

与：

html{
    background:url(https://www.metrojourneys.com/wp-content/uploads/2019/07/guatape-antioquia-colombia.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    height: 100%;
}
body{
    margin:0;
    padding:0;
}
backgroundbackgroundbackgroundfixedhtmlresponsive