我想在@media screen and (max-width: 660px)中将背景图像下移，因为每次更改屏幕尺寸时，背景图像都会上移。我想要的是每当我更改为较小的屏幕尺寸时，图像就会缩小以填充一些空间。
@import url('https://fonts.googleapis.com/css?family=Roboto|Modak|Poppins|Ubuntu&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(https://i.ibb.co/xhgZz0F/bg-image.jpg);
background-repeat: no-repeat;
background-size: cover;
}
a {
text-decoration: none;
}
header {
position: relative;
min-height: 13vh;
min-width: 100vw;
/* background-color:#000; */
}
.logo {
position: absolute;
width: 120px;
height: 45px;
border-radius: 10px;
background-color: #E73A15;
top: 30%;
left: 2%;
color: #fff;
text-transform: uppercase;
font-family: 'Ubuntu', sans-serif;
font-size: 2.5em;
text-align: center;
}
.social {
position: absolute;
top: 30%;
left: 20%;
width: 250px;
height: 45px;
/* background-color: black; */
}
ul {
position: relative;
top: 18%;
}
.social ul li {
display: inline-block;
list-style-type: none;
color: #fff;
padding: 12px 6px;
text-align: center;
}
.faceb,
.linked,
.git {
position: relative;
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #E73A15;
text-align: center;
}
.centerIcon {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
position: relative;
}
#menu {
margin: 2.2rem 3rem 0 0;
float: right;
clear: both;
}
#menu ul li {
display: inline-block;
list-style-type: none;
padding: .5rem .8rem;
margin: 0 .3rem;
text-align: center;
font-size: .7rem;
font-weight: 900;
text-transform: uppercase;
}
#menu .nav a {
font-family: "Roboto", sans-serif;
color: #fff;
}
.nav {
background: rgb(209, 129, 129);
background: linear-gradient(118deg, rgba(209, 129, 129, 1) 0%, rgba(217, 81, 52, 1) 35%, rgba(231, 58, 21, 1) 100%);
border-radius: 50px;
}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 660px) {
body {
background: url(https://i.ibb.co/xhgZz0F/bg-image.jpg) no-repeat center center fixed;
background-size: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.social {
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Jury Gregorio | Design for Everyone</title>
</head>
<body>
<header>
<div class="logo">Jury</div>
<div class="social">
<ul>
<li class="faceb">
<div class="centerIcon"><i class="fa fa-facebook-f"></div></i></li>
<li class="linked">
<div class="centerIcon"><i class="fa fa-linkedin"></div></i></li>
<li class="git">
<div class="centerIcon"><i class="fa fa-github"></i></div>
</li>
</ul>
</div>
<div id="menu">
<ul>
<li class="nav"><a href="#">About</a></li>
<li class="nav"><a href="#">Contact</a></li>
</ul>
</div>
</header>
</body>
</html>最佳答案
加
background-position: center bottom;
您也可以添加px而不是单词
尝试最适合您的价值观。