@sdetweil I didn’t see a specific call out in the documentation for that module but seems to be working fine. One the first page the background photo is at full opacity and on the other two pages the same image is dimmed (via the gradient)

@sdetweil

I found a way to do it with two instances of BackgroundSlideShow with different classes. Although the actual class assignment is a little odd. Not sure I’m grasping how the order of the modules in the config file influence what shows up. I thought the module without gradient should only have the first page class “Photos” and the second should have the other two pages classes “Info” and Weather". That didn’t work and I had to add all 3 classes to the first instance. It’s working great though!

{
			module: 'MMM-BackgroundSlideshow',
			classes: "Photos Info Weather",
			position: 'fullscreen_below',
			config: {
				imagePaths: ['modules/MMM-BackgroundSlideshow/myImages/'],
				transitionImages: true,
				slideshowSpeed: 40000,
				backgroundSize: 'contain',
				resizeImages: true,
				maxwidth: 1280,
				maxheight: 720,
				imageInfo: ['date'],
				imageInfoLocation: 'bottomLeft',
				recursiveSubDirectories: true,
				randomizeImageOrder: true,
				transitions: ['opacity'],
				backgroundAnimationEnabled: true,
				animations: 'ease-in',
				showImageInfo: true,
			}
		},
		{
			module: 'MMM-BackgroundSlideshow',
			classes: "Info Weather",
			position: 'fullscreen_below',
			config: {
				imagePaths: ['modules/MMM-BackgroundSlideshow/myImages/'],
				transitionImages: true,
				slideshowSpeed: 40000,
				backgroundSize: 'contain',
				resizeImages: true,
				maxwidth: 1280,
				maxheight: 720,
				imageInfo: ['date'],
				imageInfoLocation: 'bottomLeft',
				recursiveSubDirectories: true,
				randomizeImageOrder: true,
				transitions: ['opacity'],
				backgroundAnimationEnabled: true,
				animations: 'ease-in',
				showImageInfo: true,
				gradientDirection: 'both',
				gradient:[
				"rgba(0, 0, 0, 1) 0%",
				"rgba(0, 0, 0, 0.75) 40%"
				]
			}
		},

Hello. I have 3 pages setup with MMM-Pages. I have MMM-BackgroundSlideShow running and they work good together. One of my pages has a lot of content and I would like to turn the opacity or brightness down of the BackgroundSlideShow if a particular page is showing.

I am using classes with MMM-Pages (Photos, Info, Weather). Since BackgroundSlideshow appears on every page, it is a member of all three classes.

html.ujpqiown.idc0_350 body div.region.fullscreen.below div.container div#module_10_MMM-BackgroundSlideshow.module.MMM-BackgroundSlideshow.Photos.Info.Weather

So I don’t think I can change that div just based on the current Class of the page. Any ideas?

Module config if it helps.

	modules: [
		{
			module: 'MMM-page-indicator',
			position: 'bottom_bar',
			config: {
				pages: 3,
			}
		},
		
		{
			module: "MMM-pages",
			config: {
				rotationTime: 0, // rotate every 20 seconds
				modules: [
					["Photos"],           // class name for page 1
					["Info"],           // class name for page 2
					["Weather"],           // class name for page 3
				],
				//fixed: ["fixed_page"], //things that should show up all the time
				
			}
		},
		
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			classes: "Photos Info",
			position: "top_left",
			config: {
				displaySeconds: false,
				dateFormat: 'dddd, MMM D'
			}
		},
		{
			module: "calendar",
			classes: "Info",
			header: "Events",
			position: "bottom_right",
			config: {
				fade: false,
				flipDateHeaderTitle: true, //this didnt seem to do much
				calendars: [
					{
						fetchInterval: 1 * 24 * 60 * 60 * 1000,
						symbol: "calendar",
						url: ""
					}
				]
			}
		},

		{
			module: "weather",
			classes: "Info Weather",
			position: "top_left",
			config: {
				weatherProvider: "openmeteo",
				type: "current",
				lat: 0,
				lon:0
			}
		},
		{
			module: "weather",
			classes: "Info Weather",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				fade: false,
				weatherProvider: "openmeteo",
				type: "forecast",
				lat: 0,
				lon:0
			}
		},

		{
			module: 'MMM-Remote-Control',

			config: {
				customCommand: {
					nextPage: {  // This is the name of your custom action (you'll use this in the URL)
						notification: 'PAGE_INCREMENT', // The notification mmm-pages listens for
						payload: {} // The payload to send with the notification (check mmm-pages docs)

					  }

				},  // Optional, See "Using Custom Commands" below
				showModuleApiMenu: true, // Optional, Enable the Module Controls menu
				secureEndpoints: false, // Optional, See API/README.md

			}
		},
		{
			module: 'MMM-BackgroundSlideshow',
			classes: "Photos Info Weather",
			position: 'fullscreen_below',
			config: {
				imagePaths: ['modules/MMM-BackgroundSlideshow/myImages/'],
				transitionImages: true,
				slideshowSpeed: 40000,
				backgroundSize: 'contain',
				resizeImages: true,
				maxwidth: 1280,
				maxheight: 720,
				imageInfo: ['date'],
				imageInfoLocation: 'bottomLeft',
				recursiveSubDirectories: true,
				randomizeImageOrder: true,
				transitions: ['opacity'],
				backgroundAnimationEnabled: true,
				animations: 'ease-in',
				showImageInfo: true
			}
		},
	]
};

@aaronaxvig Thank you! All other search results that had changing the CSS body really messed up other module internal alignment. This resizes correctly and doesn’t mess with other module alignment