Support

Account

Home Forums General Issues How to use the image field for backgrounds?

Solving

How to use the image field for backgrounds?

  • 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..!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.