This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to use CSS to make the background image of an element transparent, but keep the contents of the element full opacity.
Solution: It's not possible to modify the opacity of just the background image of an element using CSS. An alternative approach is found at the link below.
Relevant Documentation: https://css-tricks.com/snippets/css/transparent-background-images/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 1 reply, has 2 voices.
Last updated by 6 years, 9 months ago.
Assisted by: Christian Cox.
I have this layout:
<div class="contenitore">
<div class="layout-creatura" style="background-image:url('[wpv-post-field name='wpcf-layout-ricordo']');">
<div class="titolo-creatura">[wpv-post-title]</div>
<div class="prima-foto">[wpv-post-featured-image size="custom" height="230"]</div>
<div class="dedica">[types field='dedica'][/types]</div>
<div class="dedica-seconda">[types field='dedica-seconda'][/types]</div>
<div class="data-decesso">[types field='data-decesso'][/types]</div>
</div>
</div>
in the front end it generates the attached photo (example10.png)
I want to lighten only the background image. I used the Css code "opacity".
It does not work because it makes everything clear to me: background, writings and photos.
I tried to insert in the Css "z-index" but I did not solve it.
What should I do ?
.contenitore {
max-width: 670px;
width:100%;
opacity: 0.5;
}
