Categories

Featured templates

JS Animated. How to change parallax background images

Carey Burns August 16, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

Our Support team is ready to present you a new tutorial that shows how to change parallax background images.

Parallax background images are used to create flexible multilayer parallax effect.

js_how_to_change_parallax_backgound_images_1
  1. In order to replace the image, open the .html file of the page with your parallax background image.

  2. Locate the code for section with parallax background, it should look like the following :

    <section class="parallax well" data-url="images/parallax2.jpg" data-mobile="true" data-speed="1">
                <div class="container">
                    <em class="wow fadeInUp" data-wow-delay="0.2s">Children's<br><strong>art center</strong></em>
                    <a class="btn btn-skin-4 wow fadeInUp" data-wow-delay="0.4s" href="#">Register your child</a>
                </div>
            </section>
  3. data-url=”images/parallax2.jpg” – defines the background image path.

  4. Section content is added between <div class=”container”> and </div>

    js_how_to_change_parallax_backgound_images_2
  5. Upload the new image to the images folder.

  6. Edit the code, replace the image title.

  7. Save changes to .html file when you are done.

  8. Check the result on your website.

Feel free to check the detailed video tutorial below:

JS Animated. How to change parallax background images

Also, don’t forget to review our brand new JS Animated website templates.

This entry was posted in JS Animated tutorials and tagged background, images, parallax. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket