Mobile background transparency

Support
#1

Hi, on my website thoekskekeerbergen.be, I have put the background opacity on the homepage by the use of this code:
.x-container.main:before {
/background-color: transparent;/
opacity: 0.7;
}
and for the other pages by the use of this code:
.x-main {
background-color: rgba(255, 255, 255, 0.7)!important;
}
But on my iPhone the opacity is not working. Can you give me CSS code to make the opacity of the background 0.7?

#2

Hi There,

Thank you for writing in, why not use the background-color: rgba(255, 255, 255, 0.25); instead? I see you have the background-color: transparent; but you commented it out? was that did not work?

If you really want the opacity try adding the visibility: visible; property.

Cheers!

#3

Hi there,

I have now set this code:

.x-container.main:before {
background-color: rgba(255, 255, 255, 0.7);
}
.x-main {
background-color: rgba(255, 255, 255, 0.7)!important;
}
@media (max-width: 767px){
.x-container.main:before {
background-color: rgba(255, 255, 255, 0.7)
}
}

What bothers me now is that on the left side and on the right side, the opacity is not visible and the background is more visible. Can you give me a code where the background color is the same over the complete width of the page?

#4

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#5

Hi Jade,

url is thoekskekeerbergen.be

Kind regards,

Pieter

#6

Hi Pieter,

Did you try the opacity and the visibility: visible; I’ve suggested above? Hows it goes?

I see that you still have the opacity: 0.7; applied on .x-container.main:before when the page is viewed in screen 767px and below.

Lets work on the background-color: rgba(255, 255, 255, 0.7); instead, and please get rid of the CSS rule below from your custom CSS.

@media (max-width: 767px) {
	.x-container.main:before {
	    opacity: 0.7;
	    /* background-color: rgba(255, 255, 255, 0.7); */
	}
}

And simplify your CSS rule above to this:

/*for home and other pages*/
.home .x-container.main:before,
body .x-main {
	background-color: rgba(255, 255, 255, 0.7);
}

Then clear your browser’s cache including the browser’s on your phone.

Cheers!

#7

Hi,

now I only applied the code like you said:
/for home and other pages/
.home .x-container.main:before,
body .x-main {
background-color: rgba(255, 255, 255, 0.7);
}

Looks good, only one the left and the right side there is less opacity. Can this be made the same?

#8

Hi There,

Update the given CSS code again to this:

/*for home and other pages*/
.home .x-container.main:before,
body:not(.home) .x-main {
	background-color: rgba(255, 255, 255, 0.85);
}

Adjust the background opacity somewhere between 0.75 - 0.90 until you get the desired result.

Cheers!