Display attached images as background-image css

admin管理员组

文章数量:1300174

I have an issue here and i hope you guys help me because i'm getting crazy. Anyway, as you know wordpress output the attached images in tag. I need them as background-image css. Here's my code;

        <?php
            $content = get_the_content();
            $feat_image_url = wp_get_attachment_url(  $post->ID, '' )[0];
            $content = preg_replace("/<img[^>]+\>/i", "<div class='single-
            parallax-image' style='background-image:url(".$feat_image_url.")'></div>", $content);          
            $content = apply_filters('the_content', $content);
            $content = str_replace(']]>', ']]>', $content);
            echo $content; 
        ?>

As you can see i need to preg_replace img tag with

<div class='single-parallax-image' style='background-image:url(".$feat_image_url.")'></div>

Thanks..

I have an issue here and i hope you guys help me because i'm getting crazy. Anyway, as you know wordpress output the attached images in tag. I need them as background-image css. Here's my code;

        <?php
            $content = get_the_content();
            $feat_image_url = wp_get_attachment_url(  $post->ID, '' )[0];
            $content = preg_replace("/<img[^>]+\>/i", "<div class='single-
            parallax-image' style='background-image:url(".$feat_image_url.")'></div>", $content);          
            $content = apply_filters('the_content', $content);
            $content = str_replace(']]>', ']]>', $content);
            echo $content; 
        ?>

As you can see i need to preg_replace img tag with

<div class='single-parallax-image' style='background-image:url(".$feat_image_url.")'></div>

Thanks..

• images

Share Improve this question asked Jan 16, 2018 at 8:26 Oyun DropOyun Drop 111 bronze badge 1

• I would look for an simpler implementation like maybe using a shortcode. If you like the simplicity of adding an image through the add media interface you could hack the gallery shortcode of wordpress(if you do not plan to use it elsewhere). – D. Dan Commented Jan 16, 2018 at 11:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

using this code

<?php if (has_post_thumbnail( $post->ID ) ): ?>
      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
    <div class='single-parallax-image' style='background-image:url("<?=$image[0]; ?>")'><?=get_the_content()?></div>

      </div>
    <?php endif; ?>

本文标签： Display attached images as backgroundimage css