How to get the URL from an image with custom image size to use as a background-image from AFC?

Register size in functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop

Display image with custom size (named: customsize) on page with ACF:

<?php $image = get_field('image_field'); ?>
<img src="<?php echo $image['sizes']['customsize']; ?> />

But how to display image as background image with ACF?:

<?php $image = get_field('image_field'); ?>             
<div style="background-image: url(<?php $image['url'] ?>)" /></div>
  • what is the HTML output when you run your last snippet? Jan 2, 2019 at 18:14

1 Answer 1


First off, this code...

<img src="<?php echo $image['sizes']['customsize']; ?> />

is missing the end quote, it should be...

<img src="<?php echo $image['sizes']['customsize']; ?>" />

You can use that same php to output the URL for the background size.

<div style="height: 300px; width: 300px; background-image: url(<?php echo $company_logo['sizes']['customsize']; ?>)" /></div>

Tested and works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.