11
Views
5
Comments
Solved
Image as background
Question
Application Type
Mobile
Service Studio Version
11.10.4 (Build 36717)
Platform Version
11.10.1 (Build 23852)

Hi all,

As the title said i want to have an image as background, i manage to almost do that with this CSS.

body {
 background-image: url("/teste/img/teste.macos4.jpg");
}
.content
{
    background-color: transparent;
    -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
{
    background-color: transparent;
    border-top: 0px solid #f1f1f1;
    
}

The problem is that the bottom comes on top next to header as the images in attachment, its a mobile App in PWA mode.

Can anyone help me to have an image as background header and footer included.


Thanks in advance.

SemTtulo1.jpg

mvp_badge
MVP
Rank: #75
Solution

Hi David,

For the mentioned use-case, you just have to define/enforce the transparent background-color CSS rule using the important  property as shown below:

.content {
    background-color: transparent !important;
}


Hope this helps you!


Kind regards,

Benjith Sam

mvp_badge
MVP
Rank: #75

Hi David,

As shared in the screen shot, the UI distortion is happening because of the defined flex value, the one highlighted in the below CSS snippet

.content {
    background-color: transparent;
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -ms-flex: 0;
}


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #34215

If i remove it i get the content placeholder in white, do you have a workaround to make it transparent?

Rank: #34215

Many thanks it worked.