Use Two background-image(s) And Dynamically Modify Opacity

Question

I am loading two fixed body background-images, both set to cover. There is text extending below the page which scrolls; as well as top and bottom navigation icons. As expected, the second background covers the first and it looks like a normal, single loaded background.

In taking tips from previous questions, I have used body {} for the first (now hidden) background-image and body:after {} for the second (on-top, visible, and opacity adjustable) background-image.

I can use CSS body:after {opacity:.5} (or any other value 0->1) to achieve a single desired effect with the top background-image while keeping my text and navigation icons at full opacity. I, however, CAN NOT access the opacity value to change it. Once I am able to do so with the aid of someone more knowledgeable, I should then be able to move forward to dynamically increment a swap of values from 1->.9->.8->etc.->0 to disappear the top background-image using a timer with 11 frames and an appropriate time interval.

My successful code snippets are below along with my failed Javascript attempt at accessing the opacity value.

(P.S.: using @RickardElimää excellent ultimate answer, the top background starts out transparent and thus actually ends up as a fade-in.)

body {
  background-image: url('./MyPhoto-1.jpg') ; 
  position: static; /* to work with Edge 10 */
  /* 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-repeat: no-repeat ; 
  background-attachment: fixed ; 
  background-size: cover ; 
/* arbitrarily set immediately below and needing to be accessed via Javascript */
  opacity: .4 ;
}


<script>//PROBLEM with scripting access to above opacity value
  // document.body.getElementById("triedDivAndBodyTag").style.opacity = ".8"
  document.getElementByID("body:after").style.opacity="0.8";
</script>

Take a look at: https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Triby, Dec 03 '19 at 04:09
Thanks for the pointer. I am, however, over my head in jQuery. I am left wondering though if I should abandon my use of body:after {} and seek a different path to my hoped for end result? — GladHeart, Dec 03 '19 at 04:20
you don't need jQuery even if the title there jQuery. Check all the answers and you will find JS only solution — Temani Afif, Dec 03 '19 at 08:38

score 2 · Accepted Answer · edited Dec 04 '19 at 03:29

2

I would suggest using CSS variables, because you (for some apparent reason) can't access values of CSS properties through JavaScript. Also, try to use CSS animation as long as possibly because it's better optimized for it.

:root {
  --background-opacity: 0.4;
}

body {
  background-image: url('./MyPhoto-1.jpg') ; 
  position: static; /* to work with Edge 10 */
  /* 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-repeat: no-repeat ; 
  background-attachment: fixed ; 
  background-size: cover ; 
  opacity: var(--background-opacity);
  transition: opacity 1100ms;
}

<script>
  document.documentElement.style.setProperty('--background-opacity', 0.8);
</script>

edited Dec 04 '19 at 03:29

Nathaniel Flick

2,902
2
22
31

answered Dec 03 '19 at 06:11

Rickard Elimää

7,107
3
14
30

Complete and brilliant answer - Kudos @RickardElimää I set your :root {} to --background-opacity: 0; which allows a smooth, rather than on/off/on initial load and then fade-in of the on-top background given my swapping script construct. I set the transition: opacity 8000ms to, as you point out optimize the animation (for smooth fade transition [and a nice slightly delay start]). Your last line of code in the 'script' I used with an 11 frame, 750ms timing swap as document.documentElement.style.setProperty('--background-opacity', int*.1); See next comment below for script code. – GladHeart Dec 03 '19 at 15:47
– GladHeart Dec 03 '19 at 15:48

Use Two background-image(s) And Dynamically Modify Opacity

1 Answers1