Hi there.
I am using ACF pro and I am trying to display an image as a background image.
I have set the background image value as URL.
Below is my code:
<?php
$image = get_field('background_image');
if( $image ): ?>
<style type="text/css">
hero {
background-image: url (<?php echo the_field('$image');?>);">"
}
</style>
<?php endif; ?>
</div>
can someone please tell me why my background image isnt showing and where I am going wrong with my code.
many thanks
Hi there,
Looks like you’ve misused the_field() function in your CSS.
Please try the code below.
$image = get_field('background_image');
if( $image ): ?>
<style type="text/css">
hero {
background-image: url (<?php echo esc_url($image);?>);">"
}
</style>
<?php endif; ?>
Remember : get_field() function store a value of an ACF field.
So as you did, you could check if value is valid, then you could echo/print this value.
the_field() function directly display your acf field value within your template.
So you don’t have to echo/print the_field().
Consider using the_field() only when you’re 100% sure the value is not empty and is valid/usable.
