当我的网页做出响应时，我希望我的背景占据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;
}