[CB-11273] Use css background-image for browser platform instead of img

• Type: Improvement
• Status: Open
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: 3.2.0
• Component/s: cordova-plugin-splashscreen
• Labels: browser bug splashscreen

Environment

any

• Assignee: Unassigned
• Reporter: Vito Macchia
• Created: 16/May/16 17:00
• Updated: 11/Nov/16 13:03

Description

In platform browser, Splashscreen plugin could use css background image instead of img child for displaying image, resulting in less distortion.
Moreover, zIndex should have higher values or it gets overlapped by other elements (this is true also with current img implementation).

My suggestion is adding some properties to the div style such as:

z-index: 9999;
background-image: url(<splashscreen name>);
background-size: contain;

And removing the img child which would become useless.

Just edit src/browser/SplashScreenProxy.js at SplashScreen.show method (about line 68):

localSplash.style.zIndex = 9999;
localSplash.style.backgroundImage = 'url(' + imgSrc + ')';
localSplash.style.backgroundSize = 'contain';