Native background image fill available height

How to make background image widget to fill available height of mobile screen even if content placed inside the widget is less than full screen height? I have tried creating a custom class on a container with flex:1 but it did not work. Also height: 100% did not work.  Background image is only displayed on part of screen according to height of text/widgets placed inside it. I want it to be full screen regardless of its content
2 answers

export const loginBackground = {

    container: {

        height: "100%"




Assign the background image widget class loginBackground


Hi Umar,

you have to use background properties in CSS. Simple Example is below.

<div class="background">
   put your content inside this div using any tag 

add below CSS in styleSheet.

.background {
  background-image: url("img.jpg");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;