Set Divi Section Background Position

Written by Dan Mossop

If you want to shift the background on one of your Divi Theme sections, you can do with Divi's position settings.

For example, suppose you have a section with a background, and some content (an accordion in this case), like so:

You can shift the entire section up relative to the rest of the content on the page by setting the "vertical offset" option in "Section Settings > Advanced > Position > Vertical Offset":

Note that a negative vertical offset moves the section up, while a positive offset moves it down. Similarly, a negative "horizontal offset" moves it left, and a positive one moves it right.

Of course, this shifts all the content of the section too. To make sure only the background is shifted, we can simply shift any rows in the section by the same amount in the opposite direction. In this case we apply a positive offset:

Now we have a section with a shifted background, but the content where it originally was. Here's how our example looks now:
One last thing you might like to do is crop the background to avoid overlap with other elements. In the case that the background is now protruding over the boundaries of an element containing the section element, you can do so by applying "overlap:hidden" to the parent element.

For example, if your section is in a standard post, you could crop any part of the background exceeding the boundaries of the post content area with:

.et_builder_inner_content  { overflow:hidden; }
Assuming the example section given above is the first one in a post, this code would crop it like so:
Now the top part of the background has been cropped, leaving only the bottom of the shifted background visible. On a standard post, this would prevent the background from obscuring the post title.

Elevate Your Posts with AI-Driven CTAs

Enhance your WordPress posts by integrating dynamic, engaging call-to-actions with WP Magic CTAs. This AI-powered plugin tailors CTAs specifically for each post, boosting reader interaction and conversion rates effortlessly. Ideal for maximizing the impact of your content strategy.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts