Background Images with ACF

Using CSS background images is popular in web development and adding them with Advanced Custom Fields (ACF) is easy. You can’t use ACF in your CSS files as it is PHP but you can add the fields to inline style tags in your PHP files.

To use this tutorial, you will need to have the ACF free version plugin installed on your WordPress site.

To add an image field, first open ACF by clicking on Custom Fields in the left hand menu in the admin panel. Once opened, click on Add New next to Field Groups and name the group you want to create, mine was for the home page.

You also need to specify where the fields will be placed such as the home page.

Click on Add Field, name the field in Field Label section and press tab, this should populate the Field Name section. Next, select Image from the dropdown in the Field Type section and make sure the Image Url is checked in the Return Format section. You can then click on Publish to save the field.

Go to the page that you added the field and add the image that you want to use then click on Update so the page is saved.

All that’s needed now is to add the image field to the inline style tag using the_field(”) in your php file. Note the number 40, this is the page id for my home page, by adding this, the field will be available on ever page which is useful if you use the same images across your website. The other CSS in the style tag can be moved into your CSS file if you wish, the only bit that is needed is the background url.

<div style="background: url('<?php the_field('home_hero', 40); ?>') center center; background-size: cover; background-repeat: no-repeat;" class="c-hero">

I hope this helps you next time you want to add a background image using ACFs in your project. You can see more options for adding images using ACF on their website.