About design and nearby

How to set a post featured image as background image in WordPress

Posted: August 20th, 2019 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

After testing your website with Google PageSpeed Insights tool you may need to reduce number of loaded resources for mobile devices to fasten the loading speed. One of possible solution could be do not display images for mobile viewport. And for that images should be used as background images.

So the post thumbnail image

  1. <?php if ( has_post_thumbnail() ) : ?>
  2.   <img src="<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>" />
  3. <?php endif; ?>

becomes a div:

  1. <?php if ( has_post_thumbnail() ) : ?>
  2. <div class="card">
  3.   <div style="background-image:url(<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>); background-size:cover;"></div>
  4. </div>
  5. <?php endif; ?>

And you can display:none div.card for mobile devices now.

Share Button

Check Related Posts:

Leave a Reply

  • 2 + = six

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now