how can i sue a background image to header and content for mobile app?

Good day guys. I would like to use a background for both of header and content just for half of my app screen 

Hi Mohamed,

I'm not sure exactly what you want and/or what goes wrong currently. But no doubt the answer to your question is "create the proper CSS". If you have a single picture you want to split between the header and footer, use the same picture in both and use an offset to get them right (see e.g. here).

Hi Mohamed,


Please find the attachment. I have created one demo my be help you.


SyntaxEditor Code Snippet

.screen
{
    background: url(/backgroundimages/img/backgroundimages.item2.jpg) 0 0 no-repeat;
   
}
.content
{
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -ms-flex: 0;
}
.header {
    background-color: transparent;
}
.iphonex .bottom-bar-wrapper {
    padding-bottom: 0 !important;
}
.bottom-bar-wrapper
{
    border-top: 0px solid #f1f1f1;
}

Hi Kavita,

Why are you using -webkit extensions? I'd assume all modern browsers fully support flexboxes nowadays?