I want to set up a different background image on each page — not an image tag, but a background image to a div. I tried this:
<?php
$image = get_field('background_image');
if( !empty($image) ): ?>
<div id="mainPhoto" style="background-image: url(<?php echo $image['url']; ?>);">
<div id="pageTitle">
<?php the_field('page_title'); ?>
</div>
</div>
<?php endif; ?>
…but no go. Is there a way to do this?
Hi @skd
Could you please make sure that the get_field() function returned the right data? You can check it like this:
echo <pre>;
print_r(get_field('background_image'));
echo </pre>;
If that is not returning anything, then it’s possible that your code is located outside of The Loop. To fix it, you need to pass the post/page ID as the second parameter to the get_field() function like this:
get_field('custom_field_name', 99)
Where “99” is the post/page ID where the custom field is assigned. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/get_field/.
I hope this helps 🙂
Image field should return image url, not id or array.
If you want more control you can set to return id and from that
<?php
$imgID = get_sub_field('background_image');
$imgSize = "full"; // (thumbnail, medium, large, full or custom size)
$imgArr = wp_get_attachment_image_src( $attachid, $size );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<?php
if( !empty($image) ): ?>
<div id="mainPhoto" style="background-image: url(<?php echo $imgArr[0]; ?> );">
<div id="pageTitle">
<?php the_field('page_title'); ?>
</div>
</div>
<?php endif; ?>
Actually, it turned out to be pretty simple. I just replaced the first code with this:
<div id="mainPhoto" style="background-image: url(<?php the_field('background_image'); ?>);">
<div id="pageTitle">
<?php the_field('page_title'); ?>
</div>
</div>
I’ve tried something like this before, and it didn’t work. This time it did. The first bit of code was copied/adapted from a previous project (where it works) because trying it this way didn’t work in the previous project.
Hi, I had the same issue, in which @skd’s last comment solved, however I’m struggling to move that style to my css file. Is it possible to move it here, since I want to further style the background image with a black gradient, to help text legibility.
section {
background: linear-gradient(
rgba(20,20,20, .5),
rgba(20,20,20, .5)),
url("<?php the_field('hero_image'); ?>"),
no-repeat 0% 80%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I’ve also tried having it as the solo background:
background-image: url(<?php the_field('hero_image'); ?>);
This reply has been marked as private.
This reply has been marked as private.
@ Rhys I know this thread is a few years old now but did you ever get a solution to this? I’m currently facing the exact same issue and looking for a solution.
I got it, I missed the obvious. setting the img return as a URL *face palms*
Hi all,
I’m trying to do something similar within an Oxygen single post template.
I’ve tried using this
border-image-source: url(<?php the_field('header_image'); ?>);
transform: translate3d(0px, 0%, 0px);
outline: none;
transition-duration: 0ms;
but can’t get it to work.
Any pointers would be gratefully received.
Thanks
Phil
@SKD thank a lot, that worked very well, you saved me tons of time..!
