What would the code be to use an image field as a 'background-image' for a div?

• [email protected]

• June 22, 2017 at 9:03 am

What would the code be to use an image field as a ‘background-image’ for a div?

I looked in the forum for an answer to this, but did not find one.

Thanks for your help.

• John Huebner

• June 24, 2017 at 8:46 am

What is the return value for the field set to? If it is URL then

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

• [email protected]

• June 24, 2017 at 12:59 pm

That did it!

This was really important to my project and I really appreciate your help.

Thank you so much!

• friendlywebperson

• February 27, 2018 at 6:45 pm

I was wondering if there was a way to use this with ID to utilize the responsive image serving integrated in WP Core (maybe its not possible). TLDR looking to insert background-image inline on a Feature Header section that doesn’t make mobile users download the full size image used on desktop browsers. Thanks in advance for any help!

• John Huebner

• March 1, 2018 at 6:52 am

You would have to build it yourself, getting the different sized images and they include an inline style block

<style>
  .....
</style>

with all of the responsive/screen size css that you’d normally use.