If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Joomla 3.x. How to make background (parallax) image responsive

This tutorial will show you how to make image background responsive in Joomla 3.x.

Joomla 3.x. How to make background (parallax) image responsive

Usually, background images are zoomed in and not responsive, i.e. they aren’t autoresized for smaller screens.

  1. Use Inspect Element tool (F12) in browser to find what line in CSS stands for background image positioning: open the Inspect Element toolbar and hover over background to find out what line and file stands for background styling.

  2. Add the background-size property to the line which stands for the background style, it will define size of the background image. To make image responsive, set its size to 100%.

    There are 2 variants of size parameters for responsiveness:

    background-size: 100% 100%;

    And:

    background-size: 100% auto;

    Values stand for image width and height accordingly. If you set height to 100%, the BG image will be displayed in full height but it may look squeezed. It’s recommended to set image height to auto to prevent image from looking distorted on different devices:

    Joomla 3.x. How to make background (parallax) image responsive

  3. Connect to server via FTP or use cPanel file manager to open and edit the file. Use Ctrl/Cmd+F to find line of CSS code required. Replace original CSS line with the updated one.

  4. Save changes and check changes on the front-end.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to make background (parallax) image responsive

 
Live Chat
We help you to choose the right product.
Start chat