Home Forums Front-end Issues Background Image for element in Category loop


Background Image for element in Category loop

  • Could someone help me with this problem?
    I would like to incorporate
    to this element
    echo ‘<div class = “menu_section_parallax” style = “background-image: url (‘ ‘)”> </div>’;
    a custom image field that I created for each category.
    This element is inside a loop that shows each category with its posts.
    I am not an expert in WordPress or PHP and I have not found a way to do it.

        'hierarchical' => 0,
        'orderby' => 'term_order',
        'order' => 'DESC',
    $categories = get_categories($cat_args);
    foreach($categories as $category) {
        $query_args = array(
            'category_name'  => $category->slug,
        $posts = new WP_Query($query_args);
        echo '<article class="menu_section">';
        echo '<div class="menu_section_text menu_section_text-left">';
        echo '<h3 class="menu_section_text_title">' . $category->cat_name.'</h3> ';
        while(  $posts->have_posts() ) :
            <div class="menu_section_text_dishes">
                <div class="menu_section_text_dishes_group">
                    <h4 class="menu_section_text_dishes_group_title"><?php the_field( 'nombre_plato' ); ?></h4>
                    <h4 class="menu_section_text_dishes_group_price"><?php the_field( 'precio_plato' ); ?></h4>
                <div class="menu_section_text_dishes_group_line"></div>
                <p class="menu_section_text_description"><?php the_field( 'descripcion_plato' ); ?>
        <?php endwhile;
        echo '</div>';
        echo '<div class="menu_section_parallax" style="background-image: url('')"></div>';
        echo '</article>';
  • Where are the custom fields and where is the image uploaded? to each category or somewhere else?

  • Hi!
    I´ve made a custom filed for taxonomy term as category. In fact the image input appears correctly in each category and I´ve uploaded images for them.
    My problem is that I dont´t find a way to show the images in this part of the code:
    echo ‘<div class=”menu_section_parallax” style=”background-image: url(”)”></div>’;
    My idea was to put the custom field code in the background-image url
    I´ve tried several solutions I found online but anything works, probably because I´ve made syntax errors or maybe because my approach is wrong.

  • You need to supply the term for ACF to get the value

    get_field('image_field_name', $category);

  • Thank so much for your answers.

    Anyway, is this correct?

    $imgcategory = get_field('imagen_de_categoria', $category);
        echo '<div class="menu_section_parallax" style="background-image: url( '.$imgcategory. ' )"></div>';

    Or this?
    echo '<div class="menu_section_parallax" style="background-image: url( '.get_field('imagen_de_categoria', $category). ' )"></div>';

    Because the images are not showing

  • Thanks ohn Huebner for your answers.
    I finally find a solution!!!
    The code that worked is this:

    $imgcategory = get_field( 'imagen_de_categoria', 'category_'. $category->term_id ) ;
        echo '<div class="menu_section_parallax" style="background-image: url( ' .$imgcategory. ' )"></div>';

    I´m not sure why it needs the ‘category_’ parameter: if you know it will be very helpfull for the future (my learning future) if you can explain it to me.
    If you can´t, thank you anyway!!

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

You must be logged in to reply to this topic.