Is there a way to create a background image that fades in from invisible opacity to 50% opacity and remains there using only CSS, without any JavaScript? I came across a similar question on Stack Overflow, but the solution seemed too complicated for me. Perhaps it could help someone with a similar issue.
In my style.css file, I have attempted the following:
body {
background-image: url("img/me.png");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
}
@keyframes fadeInBG {
0% { opacity: 0.0; }
100% { opacity: 0.5; }
}
However, this applies the animation to the entire body of the page, including any text, rather than just the background image. The simple text in my HTML file successfully undergoes the animation, while the background remains static at 100% opacity. How can I apply the animation logic specifically to the background image?
Additionally, once the animation ends, the text abruptly returns to 100% opacity instead of staying at 50%, as intended. Any suggestions on how to address this issue would be greatly appreciated.