Native background image fill available height

0
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
asked
2 answers
0

export const loginBackground = {

    container: {

        height: "100%"

    },

};

 

Assign the background image widget class loginBackground

answered
-3

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 
</div>

add below CSS in styleSheet.

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

 

answered