AgentWP

  • Tutorials
  • Themes
  • Plugins
  • Services
  • Contact

How To Use Different Background Image For Each Page / Post in WordPress

If you want to apply a different background image for each page or/and post in WordPress, then it can be done easily. Here’s the procedure.

Edit header.php file of your theme to add this code just before the </head> tag,

<?php if ( get_post_meta($post->ID, 'background-image', true) ) : ?>
<style type="text/css">
body {
background-image: url("<?php echo get_post_meta($post->ID, 'background-image', true); ?>");
}
</style>
<?php endif; ?>

Make sure you have a default background image for your theme in the style.css file.

Now for the post or page on which you want to have a different background image, add a custom field with name background-image and value the URL of the image.

The posts or pages where you don’t use this custom field will have the default background image defined in the style.css file.

That’s it. Its the easiest way to have a different background image for each post or page in WordPress.

Get useful WordPress related tricks, tips, tutorials and reviews delivered straight to your inbox.

StudioPress - Premium Wordpress Themes
ElegantThemes - Premium Wordpress Themes

Copyright © 2022 · AGENTWP · All Rights Reserved

Copyright © 2022 · awp on Genesis Framework · WordPress · Log in