我想在我的身体上添加一个具有自动背景大小的背景图像。
问题是我的图像在没有我要求的情况下就被调整了大小。我的图像的宽度是2501px,它的大小调整了640px的宽度。
我看到了一个背景大小为 auto 的背景示例,其图像为 1440px witdh,并且未调整大小。
现在,这是我的 CSS :
* {
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #272727;
color: #fff;
background-image: url("https://i.ibb.co/t4JgQsP/Background-large.png");
/* background-size: cover; */
background-size: auto;
background-position: top center;
background-repeat: no-repeat;
}
.test {
width: 200px; /* Set a specific width for the element */
text-align: center;
color: aliceblue;
font-size: 2rem;
}
.child.one {
color:aquamarine;
}
#astro {
padding-top: 8608px;
padding-right: 30px;
max-height: 67%;
/* opacity: 40%; */
filter: drop-shadow(0 0 5px cyan);
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-name: respiration;
animation-iteration-count: infinite;
}
@keyframes respiration {
from {
filter: drop-shadow(0 0 5px cyan);
}
50% {
filter: drop-shadow(0 0 25px cyan);
}
to {
filter: drop-shadow(0 0 5px cyan);
}
}
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* Center content vertically */
background-color: #272727;
color: #fff;
background-image: url("https://i.ibb.co/t4JgQsP/Background-large.png");
background-size: auto; /* Maintain original size */
background-position: center center; /* Center the background image */
background-repeat: no-repeat;
}
.test {
width: 200px; /* Set a specific width for the element */
text-align: center;
color: aliceblue;
font-size: 2rem;
}
.child.one {
color: aquamarine;
}
#astro {
padding-top: 860px; /* Adjust padding as needed */
max-height: 67%;
filter: drop-shadow(0 0 5px cyan);
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-name: respiration;
animation-iteration-count: infinite;
}
@keyframes respiration {
from {
filter: drop-shadow(0 0 5px cyan);
}
50% {
filter: drop-shadow(0 0 25px cyan);
}
to {
filter: drop-shadow(0 0 5px cyan);
}
}