CODEWITHSUNDEEP
phphtmlcsswordpress
Bob Lozano
Bob Lozano

Reputation: 592

ACF post with an image, used with html and css

I made a query for a post with an image in it and a name, but I want a to use this image as a background and a text right in the center like this:

http://gyazo.com/d71a4cc0a7afeaa672b9b3a7d22bc092

How can I use this image as a background in a box with text at the center when having both of the elements in php variables?

here is my code: 

    <?php
        $args = array(
    'post_type' => 'alimento',
);

$the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post(); 

            $nombre = get_the_title();
            $imagen_1 = get_field('imagen_principal_alimentos');
            ?>
            <div class="col-sm-4">
                <img src="<?php echo $imagen_1['url']; ?>">
            </div>

            <?php
        } 
    } 

    ?>

Upvotes: 0

Views: 66

Answers (1)

Haisum Usman
Haisum Usman

Reputation: 516

@Bob Xplosion: use inline-style attribute of css to achieve your requirement somehow like this.

suppose i have an image field with the name 'alimento_featured_image' then i will be doing like this

while ( $the_query->have_posts() ) { $the_query->the_post(); 

        $nombre = get_the_title();
        $imagen_1 = get_field('imagen_principal_alimentos');
        ?>
        <div class="col-sm-4" <?php if($imagen_1 != "" and $imagen_1 != NULL){?>style="background:url(<?php echo $imagen_1;?>);"<?php }?>>
            <?php echo $nombre;?>
        </div>

        <?php
    } ?>

Upvotes: 1

Related Questions