How do I set a semi transparent colour over a ACF background image?-CodePudding

Exactly what it says in the title. How do I set a semi transparent coloured layer over an ACF background image?

I'm using an ACF image as a div background for a certain div box on a WP site. I need to have a black background colour set to x% transparency over the image but under the text.

I can't for the life of me figure this out.

I've tried adapting the code on this page (https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity) but it breaks the image and throw up an error code.

Anyone know how to do this correctly please? my css -

    text-align: center;
    color: #ffffff;
    font-size: 2em;
    padding: 2em 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}

and my html -

<div id="residential_page_header_image_text" style="background-image: url(<?php the_field('residential_page_header_image'); ?>);">
<p><?php if( get_field('residential_page_header_image_text_1') ): ?>
    <?php the_field('residential_page_header_image_text_1'); ?>
<?php endif; ?></p>
    <p><?php if( get_field('residential_page_header_image_text_2') ): ?>
    <?php the_field('residential_page_header_image_text_2'); ?>
<?php endif; ?></p>
    </div> ```

CodePudding user response：

Are you looking for this? Take a look.

.acf-image {
    width: 200px;
    height: 200px;
    position: relative;
    object-fit: cover;
    overflow: hidden;
}
.acf-image:before{content:''; position:absolute; inset:0; background-color: rgba(0,0,0,.5)}
.acf-image img{object-fit:cover; height:100%; width:100%}
.acf-text{position: absolute; top:50%; transform: translateY(-50%); text-align:center; left:0; right:0}
.acf-text p{color: #fff; font-size:17px;  }

<div >
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png" alt="">
<div >
<p>Lorem Ipsum<p>
</div>
</div>