This is how it looks in the Ambiance Theme
How this works:
When you add an image to the “featured image” widget of a post or page, this code is initiated.
Let’s Get Started
If your theme folder does not have a folder titled ‘js’ (without quotes), you’ll need to create one.
Create 2 new files in the js folder. Be sure to copy the file names listed below exactly. Then open each of the links below, and copy the code into the new files you’ve created in your js folder.
Let me do a little explaining.
backstretch.js is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element, and this file is the actual plugin. We will NOT be modifying this file.
backstretch-set.js is the file that controls the animation (load time and fading effect) and it is how we assign a class (for styling) to the image. In this case we use the class, “.entry-background”, to control the height, width, and display of the image.
You will need to copy and past the code below into your child theme’s functions.php file.
Copy and past this code into your child theme’s style.css file.
That’s all! If you encounter any issues be sure to use the comments here and I’ll do what I can to help!