0

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? – RiddleMeThis Jan 2 '19 at 18:14
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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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