background_image does not work correctly in WEB

[lJanusl]

Describe the bug

When I use background_image and compile in web it doesn't show me the background image I set.

Configuration

` flutter_native_splash: ^2.2.14

flutter_native_splash:

android: false
ios: false
web: true

#color: "#F74E63"
background_image: "assets/splash.png"
background_image_dark: "assets/splash.png"
image: assets/atrapalo.png
`

Device (please complete the following information):

• Device: [Laptop Asus, hp, Samsung s10 and s21]
• OS: [Window 11, Android 11]

This is style.css

when I change % to vh, the background image is shown but it makes an effect of changing the orientation of the image.

body { margin:0; height:100%; background: #F74E63; background-image: url("img/light-background.png"); background-size: 100% 100%; }

I really appreciate the work and the effort to respond, thank you very much.

[charlesluzar]

I can second this.

In the generated style.css file we have two similar blocks, one for dark mode and one for light. Here's the dark-mode-centric one:

@media (prefers-color-scheme: dark) {
  body {
    margin:0;
    height:100%;
    background: #000000;
    background-image: url("img/dark-background.png");
    background-size: 100% 100%;
  }
}

The background property takes precedence over all other background-related properties. See this explanation. This renders background-image and background-size totally moot.

Here's my flutter_native_splash config:

flutter_native_splash:
  android: true
  ios: true
  web: true
  background_image: "assets/images/mobile/background.png"
  image: "assets/images/mobile/logo.png"
  android_gravity: "center"
  ios_content_mode: "center"
  android_12:
    color: "#015394"
    icon_background_color: "#FFFFFF"

You can see that I don't specify #000000 anywhere, so it's interesting that it gets set as a background at all.

As an aside... what would be great is if we could provide color-based background overrides per platform. This is particularly useful for web, where I really don't want to throw an enormous background file at the user as they're trying to load the web app. The logo on a plain white screen is fine. I'd argue this keeps with the override-driven nature of this tool and would feel very natural for anyone making heavy use of this package.

Some aspirational config...

flutter_native_splash:
  android: true
  ios: true
  web: true
  background_image: "assets/images/mobile/background.png"
  background_color_web: "#FFFFFF" # Currently not supported, but it would be nice!
  image: "assets/images/mobile/logo.png" # A lighter logo for my darker background_image, for mobile
  image_web: "assets/images/web/logo.png" # A darker logo for the white background we set for web above
  android_gravity: "center"
  ios_content_mode: "center"
  android_12:
    color: "#015394"
    icon_background_color: "#FFFFFF"

The quick fix is to just manually override the output of style.css. If you want to stick with a color, in my case white:

body {
  margin:0;
  height:100%;
  background-color: #FFFFFF;
}

If you want the image:

body {
  margin:0;
  height:100%;
  background-image: url("img/light-background.png");
  background-size: 100% 100%;
}

Rerunning the command to generate splashes after manually editing style.css doesn't affect anything. Not sure how I feel about that but it is true. 😆

[jonbhanson]

I will push out an update soon to resolve this. @charlesluzar thanks for your insight on the background tag and suggestions, I like them!