I'm a little stuck on this section. I've only added ACF php in html when the background image was located in the html. Now I have 2 shapes in my css with pseudo elements. How would I add the php so it works on wordpress?
HTML
<section class="main-content-section home">
<section class="hero-section" style="background-image: url(images/home-hero@2x.jpg);"></section></section>
CSS
.hero-section:before,.home .hero-section:after{position: absolute; left: 0; top: 0; content: ""; background-image: url(../svgs/Rectangle.svg); background-position: left top; background-size: contain; background-repeat: no-repeat; width: 64.25%; height: 100%; z-index: -1;}
.home .hero-section:after{background-image: url(../svgs/Rectangle-Copy.svg); background-position: right bottom; left: auto; top: auto; right: 0; bottom: -46%; width: 63.125%;}
The easiest way to do this would probably include inline <style>
tags in your template, using the image from the ACF field, as you cannot use an inline style on a pseudo selector in the HTML directly.
Ie:
<style type="text/css">
.home .hero-section:after {
background-image: url('<?= get_field('your_acf_image_field')['url'] ?>');
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.