Creating a visually innovative webpage with Divi sometimes means customizing background images for specific effects. In this post, we’ll guide you through the process to make a background image cover just the right half of a section, offering a unique look without needing extensive redesign work.
Below, you'll see examples capturing the transformation – how your section looks before and after applying this technique.
Before
After
You can achieve this by adding custom CSS to your section settings in Divi like so:
Open your page in the Divi Builder, and select the section you wish to modify.
Navigate to "Section Settings" > "Advanced" > "Custom CSS."
Insert the following CSS:
selector {
background-size: cover;
background-position: 25vw !important;
}
selector::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
background-color: inherit;
}
Now save the section settings and view your page – your split background should be applied.
The code works by shifting the center of the image 25% of the way to the right of the screen, centering it on the right half of the background area, and then covering the left half with a pseudo element that has the same background color as that set on the section itself.
It allows you to design creative, modern layouts within Divi without needing additional plugins or redesigning entire sections. Feel free to experiment with the background-position value for precise alignment of the image.
0 Comments