WordPress Cherry 3.x. How to replace video background with an image on Home page

This tutorial will show you how to replace background video with an image on the Home page in WordPress Cherry templates.

WordPress. How to replace background video with an image on Home page

Usually WordPress Cherry templates use the Cherry Parallax plugin to display background video on Home page. More information about this plugin you will find in the following tutorial: WordPress. How to work with Cherry Parallax Plugin.

To replace background video with an image on the Home page, you should replace Video Parallax Shortcode with Image Parallax Shortcode. Please perform the following steps:

1. First, you should upload a desired image to the Media Library. Log into your WordPress admin panel, navigate to Media → Add new tab and click Select Files button to upload an image from your computer:

   

2. When the image is uploaded, click Edit button to check the full image file name. You can see the file name in the right column of the image editor (see the screenshot below):

   

   You can copy the file name to any text file on your computer, because you will need it later for the Image Parallax Shortcode.

3. Now you should edit the background video shortcode. Navigate to Pages tab and open your Home page.

4. In the Text area of the page editor find the Video Parallax Shortcode that will look the similar way:

     [cherry_video_parallax mp4="globy.mp4" webm="globy.webm" ogv="globy.ogv" 
     poster="globy.jpg" custom_class="cherry_media_parallax_1"]
     Your content goes here...
     [/cherry_video_parallax]
     

   

   NOTE: It is recommended that you make a copy of this shortcode before removing it. You will need some information from this shortcode later.

5. Replace this shortcode with the provided one below Image Parallax Shortcode saving your content in it:

     [cherry_parallax image="main_bg.jpg" speed="normal" invert="false" custom_class="cherry_media_parallax_1"]
     Your content goes here...
     [/cherry_parallax]
     

   where main_bg.jpg is the name of the uploaded image that you copied in step 2.

   NOTE: It is recommended that you copy the custom class from the Video Parallax Shortcode to the Image Parallax Shortcode (if custom class differs from the one mentioned in this tutorial) to save all styles of this section on the site. If you don’t have custom class attribute in the video shortcode, add it with any value.

6. Don’t forget to click Update button to save changes on the page. Now you can open your site to check the changes.

There is a chance that you will see the background image similar to the removed background video while loading the site. This image is used as placeholder.

You can remove this image via the WordPress admin panel. Navigate to Cherry Options → General tab. You will see that image there. Just click Remove button near the image link, then scroll the page down and click Save Options button to save the changes. Now you can refresh the site. You will see that the body background image was removed successfully:

This is the end of the tutorial. Now you know how to replace background video with an image on the Home page.

Feel free to check the detailed video tutorial below:

WordPress. How to replace background video with an image on Home page