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

Question

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

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

Answer 1

我想我有你要找的东西：

首先：从 html 和 css 中删除 your.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;
}

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

问题描述

1 个解决方案

解决方案1
0 2020-12-20 11:58:03

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

问题描述

1 个解决方案

解决方案1 0 2020-12-20 11:58:03

解决方案1
0 2020-12-20 11:58:03