@sdetweil I’m still not having any luck. I tried adding z-index: -1 to the region.middle_center in the custom css. It still placed the photos over some of the modules. I tried adding a z-index: 0 or 1 to another region to see if I could re-layer the regions. No difference. I added z-index: -1 to the middle_center region in the main. css. It centered the photos under all the other regions, but left a black bar in the middle of each. Lastly I tried to add an align-items and align-content to the main css under the fullscreen region. Neither worked.

@sdetweil I could use that code to position the middle_center region behind the other regions?

@plainbroke Unfortunately if I use the middle_center position, the photos will block out the other modules on the page. I need to use the fullscreen_below region. I tried to add the Horizontal-align to my css, but it didn’t recognize that parameter.

@sdetweil I’m trying your version and I’m still having issues with the photos not centering. Here is the code I’m using in the config file.

 {
			module: "MMM-ImagesPhotos",
			position: "fullscreen_below",
			config: {
				opacity: 1.0,
				animationSpeed: 500,
				updateInterval: 5000,
				backgroundColor: 'grey',
				//backgroundSize:'contain',  // not used if fill is true
				fill: true,   // fill around image with blurred copy of image
				blur: 10, // only used if fill is true
				//maxWidth: 1920,
				//maxHeight: 1080,   
			}
		},

I’m trying to use this in the fullscreen_below position. The photos will not center on the screen. Is there a way to do this, or to use the “contain” or “cover” options like on MMM-BackgroundSlideshow?