Background as Thumbnail image

  • Phillip

    (@phillustration)


    7 years, 3 months ago

    Hi there,

    I am having trouble using an image thumbnail as a background image.

    The code doesn’t break but it is adding “<img src=” where the url is meant to be.

    <?php if (have_posts()): while (have_posts()) : the_post(); ?>
	<!-- article -->
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	
		<!-- post thumbnail -->
		<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
		<?php $thumbnail = get_the_post_thumbnail( null, $size, $attr ); ?>
		<div id="work" style="background-image:url('<?php echo $thumbnail ?>
			<a class="title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
		</div>
		<?php endif; ?>
		<!-- /post thumbnail -->
			
	</article>
	<!-- /article -->

<?php endwhile; ?>

<?php else: ?>

	<!-- article -->
	<article><h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2></article>
	<!-- /article -->
	
<?php endif; ?>

    Thanks for any help,

    Phil

Viewing 1 replies (of 1 total)

  • If that’s the actual code you’re using, I can see what’s wrong. You haven’t closed the DIV tag. If you’re using the image as a backgorund like that, you should not be using anything like a img tag either, so forget about that.

    Also, the get_the_post_thumbnail() function returns the entire img tag, so that’s definately not what you want.

    How it would work is just this:

    <?php if ( has_post_thumbnail()) : ?>
	<?php
		$thumbnail = wp_get_image_attachment_src (get_post_thumbnail_id ($post->ID), $size);
	?>
	<div id="work" style="background-image:url('<?php echo $thumbnail [0]; ?>');"></div>
<?php endif; ?>
Viewing 1 replies (of 1 total)
  • The topic ‘Background as Thumbnail image’ is closed to new replies.