Currently, I am facing an issue while trying to set a background image on my webpage with the auto background-size property.
The problem arises when my image gets automatically resized.
Even though my image has a width of 2501px, it is being resized to a width of 640px.
Below is the resized background image:
https://i.sstatic.net/xsQdR.jpg
Interestingly, I recently came across an example where a background-size: auto was used with a 1440px width image, and it did not resize.
Check out the example I found:
https://i.sstatic.net/93Y85.jpg
Here is the CSS I am using:
* {
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);
}
}