Does background_image support showing multiple image sizes like feature image? I can see multiple files were created when I uploaded a file. How do I use those images or does background_image not allow that to happen?

Something like get_background_image('large') [doesn't work] or something where I can insert the dimensions after the file name like the-url-to-the-image-1024x768.jpg.


Yes, you can use those images having different sizes.

When you upload an image, by default wordpress creates four images with different sizes like 50 X 50, 150 X 150, 300 X 225 and 500 X 500 and original size of image.So you can use any of them by following code :

    the_post_thumbnail();                  // without parameter -> Thumbnail

    the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
    the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
    the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
    the_post_thumbnail('full');            // Original image resolution (unmodified)

    the_post_thumbnail( array(100,100) );  // Other resolutions(this will be cropped as per size given by you)

You can use that images in your background but you need to add custom CSS to make it happen as per your desired result.

NOTE: You can always change size of image by going to admin dashboard and then Setting > Media.

  • This isn't for feature image, this is for Custom Background on a theme. – Gregory Schultz Nov 13 '14 at 4:34
  • Are you using default theme or some free wordpress theme ?If free theme, then can you please provide link of that ? – Rohil_PHPBeginner Nov 13 '14 at 4:36
  • It's an internal site and I'm designing my own theme. – Gregory Schultz Nov 13 '14 at 4:42
  • You can use $media_dir = wp_upload_dir('2014/11');<style type="text/css" media="all"> body { background-image: url("<?php echo $media_dir['url']; ?>/images/background.jpg"); background-repeat: repeat-x; } </style> So it will add the background image. You can find more about wp_upload_dir. Define above code in your header.php – Rohil_PHPBeginner Nov 13 '14 at 4:52

Figured it out using str_replace.

First the location of the background image is stored in a string:

<?php $backimg = get_background_image(); ?>

Then perform a string and replace where the .jpg is removed at the end of the $backimg and is stored as $bgraw

<?php $bgraw = str_replace('.jpg','',$backimg);?>

It output as:


The .jpg is removed; from there you insert the file you want to use. For example, I have a custom image where the dimensions are 1280px wide by 450px height. The image is created as fileimage.jpg-1280x450.jpg.

To use that image, take the stored value of $bgraw and add -1280x450.jpg or whatever file you want to use instead.

<?php echo $bgraw . '-1280x450.jpg' ;?>

That outputs as:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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