Parallax Effect: Fixed Background Under Transparent Content

parallax effect

Create A Parallax Effect Using Elementor

The parallax effect is simple to implement. 

  1. Go the Section’s Style tab, and choose a background image.
  2. When applying your background image to a section, change the “Attachment” option to Fixed instead of Default.
  3. Optionally, you’ll probably want to also change the “Size” option to Cover, although feel free to play with the other options to see which works best for your situation..
  4. For even better effect, you can add the free Universal Functions plugin from Zulfikar Nore, available on Github. Simply install via Plugins > Add New. There are no settings to deal with.

Transparent Content On Top Of Background

Making a block of content transparent, so that the background can show through is also incredibly easy with Elementor.

  1. As long as your section has a background, your text widget content will automatically allow the background to show through. In effect, you could stop right now, do nothing, and you would get the desired effect.

    If, however, the contrast between the background and the text isn’t enough, making the text hard to read, you can solve that problem simply. Just use an overlay color, with an opacity level set, on the column.
  2. In the Style tab for the column, choose a background type, such as Classic. At this point, you don’t need to choose a background color.

    Once you’ve clicked the background type, a new option becomes available called Background Overlay.  
  3. Choose a background type for the Background Overlay as well, but this time, also choose a color.

    Choose a color that has a strong contrast with the color of your text.

    If your text is dark, choose a light color, and vice-versa if your text is light.
  4. Once you’ve chosen a color, set the Opacity level at whatever looks best for your situation. I find that an opacity level somewhere between 0.5 and 0.7 is often a good choice.
background overlay

Leave a Reply

Your email address will not be published. Required fields are marked *