Fixed Mobile Background: 2 Simple CSS Workarounds For Divi

How do I make a fixed mobile background is a question has been coming up a lot and a post by u/TheGoldfreak on Reddit made me do a midnight dive into finding a workaround. I believe there might be some other similar if not identical solutions floating on the intrawebs. My primary goal was to get this working on Divi. However this can be adapted very easily to any website.

At the time of writing this there are a couple of methods to do this relatively reliably.

1. Using a pseudo-element to set a fixed mobile background
2. Using clip path to set a fixed mobile background
3. Using a fixed DIV to set a fixed mobile background

I have personally found that using the ::before pseudo-element is the least janky. A fixed DIV is a very similar way to set fixed mobile background as the pseudo element option but a bit more convoluted to implement in Divi so I’ve totally left this out.

Things to remember

• This is pretty much a hacky way of doing it as background-attachment:fixed; does not work on mobile. This is by design. So it may not work perfect or at all on some devices.
• For Divi YOU MUST set the Section colour to transparent. You can do this by either going into one of your sections and setting the background colour to transparent and then adding the Background style to the active preset. (Warning: This will change all site sections to transparent.)
• You can also set the Section background to transparent with some global css.

.et_pb_section {
    background-color: transparent !important;
} 

1. Using a pseudo-element To Set A fixed mobile background

The pseudo-element method creates an invisible layer behind your content. This layer holds the background image and stays in place while you scroll. It’s like having a painted backdrop that remains still while the actors move on stage.

How To Use a pseudo-element To Set A fixed mobile background

• Set your background in Appearance > Customiser > General > Background
• Copy and paste the code below in Appearance > Customiser > Additional CSS

@media (max-width: 960px) {
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-image: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-size: inherit;
  z-index: -1;
}
}
body.custom-background {background-attachment:fixed!important;}

HOW A PSEUDO-ELEMENT Works TO SET A FIXED MOBILE BACKGROUND

Create a Fixed Background Layer

• The body::before selector creates a pseudo-element that acts as an overlay for the entire viewport.
• content: "" creates an empty element that can be styled.
• position: fixed keeps this element stationary, regardless of scrolling.
• top: 0 and left: 0 position it at the top-left corner of the viewport.
• height: 100% and width: 100% make it cover the entire viewport.

Copy Background Properties

• background-image: inherit copies the background image from the body element.
• background-position: inherit, background-repeat: inherit, and background-size: inherit ensure all background properties match the body.

Layering and Performance

• z-index: -1 places this pseudo-element behind all other content.
• Using a pseudo-element can improve scrolling performance on mobile devices by offloading the fixed background to a separate layer.

Why It Works

• This method creates a static background layer separate from the scrollable content.
• It solves issues with background-attachment: fixed on some mobile browsers.
• The background appears fixed while allowing smooth scrolling of content.

2.Using Clip Path To Set A fixed mobile background

If for some reasons the pseudo solution does doesn’t work for you then you can try the clip path method. The clip-path method shapes the entire webpage like a digital cookie cutter. It keeps the background image within the screen’s bounds, preventing any overflow issues when scrolling. This technique tricks mobile devices into showing a fixed background, even when they usually don’t support it.

How To Use Clip Path To Set A fixed mobile background

• Set your background in Appearance > Customiser > General > Background
• Copy and paste the code below in Appearance > Customiser > Additional CSS
• Replace YOUR_BACKGROUND_IMAGE_URL with a link to your background image

@media (max-width: 980px) {
  @supports (-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0)) or (clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0)) {
    body {
      -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      overflow-x: hidden;
    }
    
    #main-content::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-image: url('YOUR_BACKGROUND_IMAGE_URL');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1;
      pointer-events: none;
    }
  }
}

How Clip Path Works To Set A fixed mobile background

Target Mobile Devices

• @media (max-width: 980px) applies the styles only on screens 980px wide or less (typically mobile devices).

Check Browser Support

• @supports checks if the browser supports clip-path or -webkit-clip-path.

Apply Clip Path to Body

• body { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); } creates a rectangular clip path around the entire body.
• This prevents the fixed background from appearing outside the viewport edges.
• overflow-x: hidden prevents horizontal scrolling issues caused by the clip-path.

Create Fixed Background

• #main-content::before creates a pseudo-element inside the main content area.
• content: '' creates an empty element that can be styled.
• position: fixed keeps the background stationary during scrolling.
• top: 0; left: 0; width: 100%; height: 100vh; makes it cover the entire viewport.

Style the Background

• background-image: url('YOUR_BACKGROUND_IMAGE_URL') sets the background image.
• background-size: cover ensures the image covers the entire area.
• background-position: center centers the image.
• background-repeat: no-repeat prevents the image from repeating.

Layering and Interaction

• z-index: -1 places the background behind other content.
• pointer-events: none allows clicks to pass through the background layer.

Why It’s Works

• This method creates a fixed background that works on mobile devices where background-attachment: fixed often fails.
• The clip-path on the body ensures the background doesn’t cause overflow issues.
• It provides a smooth scrolling experience with a stationary background.