With the challenge of loading two fixed body background-images, both set to cover, I encountered a dilemma. The text on the page was extending below and scrolling, along with top and bottom navigation icons. As expected, the second background covered the first, giving the appearance of a single loaded background.
In seeking guidance from previous inquiries, I utilized body {} for the first (now concealed) background-image and body:after {} for the second (visible, adjustable opacity) background-image.
By applying CSS body:after {opacity:.5} or any value between 0 and 1, I managed to achieve a specific effect with the top background while maintaining full opacity for text and navigation icons. Yet, altering the opacity value proved to be a challenge. Once equipped with expert assistance, I aimed to incrementally adjust opacity values from 1 to 0 in order to fade out the top background using a timed sequence with 11 frames at suitable intervals.
Below are the successful code snippets as well as my unsuccessful Javascript endeavor to access the opacity value.
(P.S.: thanks to @RickardElimää's exceptional ultimate answer, the top background initially appears transparent and eventually transitions into a fade-in effect.)
body {
background-image: url('./MyPhoto-1.jpg') ;
position: static; /* necessary for Edge 10 compatibility */
/* z-index: -2 ; */
background-position: center center ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
}
body:after {
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('./MyPhoto-2.jpg') ;
position: fixed ;
z-index: -2 ;
background-position: center center ;
background-repet: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
opacity: 0.4 ; /* set arbitrarily and requiring Javascript access */
}
<script>//Issue encountered when trying to access opacity value through scripting
// document.body.getElementById("triedDivAndBodyTag").style.opacity = ".8"
document.getElementByID("body:after").style.opacity="0.8";
</script>