Jim R Web logo

Background Hero Images

Introduction

An effective, attention-grabbing effect for web pages is to have a background image on the page and have the content scroll over it. A hero banner is usually above the fold for the greatest impact when the  page opens. However, an interesting idea is to use an image break between sections within the page. It breaks the train of thought and can serve to introduce new material. But just a full-width image between blocks is boring and even irritating on small devices.

Here’s the code:

@supports (-webkit-clip-path: polygon(0 0, 0 10%, 10% 10%)) or (clip-path: polygon(0 0, 0 10%, 10% 10%) ) {
selector {
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
overflow:hidden;
}
selector::before{
position: fixed;
top:0;
left:0;
height:100vh;
pointer-events:none;
}

 

 

Thanks to

Maxime Desrosiers of Element How

  

Mechanics

I assume you are familiar with the format of the page as described in Controlling Page Margins and have a primary container with preliminary text for the page. To create a fixed image that scrolls along with the page content, follow these simple steps:

  1. Drag and drop a container onto the page. Do this by dropping the container on the edit window’s “Drag widget here” region. This will place the container at the same level as the primary container.
  2. Adjust the Min Height property to the height of the image. You can check the image size by hiding the editor control panel. (Use the compress button at the left of the edit panel.) 
  3. Add your desired image to the container’s Style as a background image and set the Image Resolution to “Full” while also setting the Display Size to “cover.”  Set “No-repeat” for the Repeat property.
  4. Finally, set the Attachment to “Fixed” to lock the image in place and turn on Scrolling Effects.

A nice effect is to not set the image’s container Min Height to the full height of the image. This will have the foreground content scroll “over” a background image.

You will have to add another primary container following the procedure outlined in step 1 to add more content after the pinned image.

That’s it! You now have a fixed image that stays visible while the page content scrolls. Unfortunately, this effect only works on desktop and widescreen monitors. For laptops, tablets, and mobile devices, the image container will become part of the foreground and scroll with the regular content. This can be overcome with a little bit of CSS, see lEasy Elementor Background Fixed on Mobile by Maxime Desrosiers of elementHOW.