I'm displaying a picture under each post on my homepage using the following PHP code:

<div class="preview">
    <a href="<?php the_permalink(); ?>" rel="bookmark"  style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID), array( 300,300 ), false, '' ); ?>');"></a>

And the following CSS to make it appear at a certain size:

.preview a { 
    background-position: 0 50%;
    background-size: cover;
    display: block;
    height: 250px;

Is there any way to feed in the image dimensions when I get the image URL, so that I can link to something that's a specific size? So instead of having to load huge images, it just loads one that is something like 1200px by 250px, and grabs the middle part of the image rather than the top.

Thank you :)

1 Answer 1


You can use Adaptive images WordPress plugin. It generates images on the fly and cache them. It gives to settings in admin section in which you can specify your breakpoint ( on which it will generate images ).

You can also use Picturefill.WP WordPress plugin.

  • That's great, thanks Ravs! Going to try Adaptive images now, that looks perfect!
    – Nick
    Jun 23, 2015 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.