Different backround photos for different pages

[Ivo Mednis]

How to set up different background photos for different pages?

[Bill Robbins]

Hello Ivo,

To add in a different image for your hero section, here’s what you’ll want to do.

1. Edit the page where you want to add in an image.
2. Look in the left hand column near the bottom for a box labeled Featured Image.
3. Upload your image there. There’s a quick video at http://vimeo.com/60180940 that can walk you through setting a featured image.
4. Next look above the featured image box for one labeled “format” and choose “Image” there.
5. Update your page.

That will give you a different image for that page. You can repeat that process for the other pages on your site where you’d like to have a hero image.

If you have any questions or trouble, let me know,
Bill

[Ivo Mednis]

Ok, this is for Hero section, but is it possible to set different pictures for background?

[Bill Robbins]

Sorry about the misunderstanding. You can do that too. There is at least one plugin at http://wordpress.org/plugins/background-per-page/ that indicates it will set that up for you. I haven’t tried it, but if it works, that should be the easiest option.

If it doesn’t work, there is another way. Here’s how we used to do that:

1. Go to the Plugins section and select Add New.
2. Search for the Art Direction plugin and install/activate it. It’s an older plugin, but still works well.
3. Next go to the Media section and select Add New. Upload the image you’d like to have as a background. Once the upload completes, click the Edit link. On the next screen, look on the right hand side and you’ll see a box that has the URL to that image. Copy that URL.
4. Next edit the page where you’d like to have the separate image.
5. There should be a new box added by the Art Direction plugin. In the side of it that will only apply to that page, paste this:

   <style>
   body { background-image: url(https://yoursite.com/image.jpg); }
   </style>

   Just replace the http://yoursite.com/image.jpg with the URL you copied earlier.

6. Update your page.

That will let you set a background image that will be unique for that page.

If you have any trouble, let me know,
Bill

[Author]

Posts