Background image on wordpress loop

Question

I am trying to get the past images as background using

  <div class="sectionrecipes" style="background-image:url('<?php the_field(background_image_detail); ?>');">

but it shows blank, i have tried with echo too

  <div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">

I have checked on developer tool and it shows like this:

  <div class="sectionrecipes" style="background-image:url('370, Coole Swan Blue &amp; White Chocolate Custard Pie, blueberry-page, , Coole Swan Blue &amp; White Chocolate Custard Pie, image/jpeg, http://cooleswan.juvoclients.com/wp-content/uploads/blueberry-page.jpg, 1082, 527, Array');">

If I delete all the data on the developer tool like this:

  <div class="sectionrecipes" style="background-image:url('http://cooleswan.juvoclients.com/wp-content/uploads/blueberry-page.jpg');">

The image shows on the page. So How can I stop wordpress to apply the image details?

Than kyou

Answer 1

Your background_image_detail is no variable or string and therefore wrong syntax.
It has to be:

<?php the_field('background_image_detail'); ?>

And you dont have to echo the_field() as it already outputs. get_field() will return the value.

Answer 2

In the Custom Feild settings, you'll need to select "Image URL" as the return value. It appears to be currently set to "Image Object"