Set Divi Section Background Position

|

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.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

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 *.