No opacity on picture added via Site Settings and Page

thestingpilot

Hello,

I have added a background image via Site Settings -> Page. Now, I would like to know if it is possible to add some opacity, so the focus is more on the text. Now, the text is unreadable.

The site is still under development, so I cannot give you a life site URL as it is running on my test server.

Your feedback is appreciated and with kind regards,
Willem-Jan

thestingpilot

I tried to add an already transparant picture but that is not shown or shown white.

saguaros

thestingpilot

I'm not quite sure which template are you using and which section you're working on.

Kindly share some screenshots so I can suggest further.

thestingpilot

Hello,

Thanks for your response. The current settings:

(Please, ignore the Hikashop pictures.)

And this is what I want to have:

Your feedback is appreciated a lot. By the way, adding an already picture with opacity (transparancy) added results in a white background and no picture.

Thanks for your help and with kind regards,
Willem-Jan

saguaros

There is no option to add opacity in backend right now. If you want to customize css code, here is the generated css code for this setting:

.t4-content {
    background-color: var(--body-bg-color);
    background-image: url(//images/demo/blog/blog-2.jpg#joomlaImage://local-images/demo/blog/blog-2.jpg?width=960&height=540);
    background-repeat: repeat;
    background-position: left top;
    background-size: cover;
    background-attachment: scroll;
}

You can customize as you wish 🙂

thestingpilot

Thanks for your reply.

I have added the following under Custom CSS:

.t4-content {
  opacity: 0.5;
}

But everything has now opacity. Only the image should have opacity.

Thanks!
Willem-Jan

thestingpilot

I found the following on https://coder-coder.com/background-image-opacity/:

.t4-content::before {
    content: "";
    position: left top;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.25);
}

But that does not work either...

thestingpilot

I finally got it working with the following CSS code:

.t4-content::before 
 {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0.70);
 }

While playing around with the developper tools I found this one:

So I played with the values and this one is the best.

Case closed. And maybe it helps someone else.

With kind regards,
Willem-Jan

saguaros

thestingpilot Thanks for your sharing! Much appreciated 😉