-
Notifications
You must be signed in to change notification settings - Fork 214
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
background_image does not work correctly in WEB #450
Comments
I can second this. In the generated @media (prefers-color-scheme: dark) {
body {
margin:0;
height:100%;
background: #000000;
background-image: url("img/dark-background.png");
background-size: 100% 100%;
}
} The Here's my 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 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 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 |
I will push out an update soon to resolve this. @charlesluzar thanks for your insight on the |
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):
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.
The text was updated successfully, but these errors were encountered: