⚠ The Black Friday 2020 WordPress Deals List Is Live!
Check It Out!

Positioning Oxygen Builder Image Backgrounds

Authored By: James LePage
Published On: July 24, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

This article is going to discuss how to center Oxygen Builder image backgrounds (and position them in different ways). 

The base version of the Oxygen Builder allows you to easily add image backgrounds to sections and divs, but there's no easy way to position them after inserting them into the page. If you're coming from other page builders like Elementor, you've come to expect an easy way to position Background images. 

Even if the oxygen builder doesn't have a nice graphical user interface that allows you to position background images, it's still quite easy to do this. 

Instead of adding a third party plug in or manipulating the image via the built in Percentages, we are simply going to use a bit of custom CSS. 

When it comes to positioning background images in oxygen (or any other page builder for that matter), this is done using custom CSS. Even if you have a nice graphical user interface, you're simply selecting something that applies that specific CSS attribute to the background image. 

All we need to do is add the background positioning manually in oxygen. 

First, let's quickly review how to position background images in CSS. 

There is a specific CSS property called background-align, which does exactly what it says it does. You can choose from preset positioning or position it via pixels/percentages. 

Here are a few examples on how to position a background image using custom CSS (you can view more at this link): 

background-position: center; 

background-position: bottom; 

background-position: right top; 

background-position: 10% 50%; 

As you can see, you can specify things generally, or become more targeted with the background positioning. This works in tandem with the background-attachment property. 

Once you've figured out how you want to position the image in your oxygen builder section or div, simply navigate to the advanced settings for the respective element, open custom CSS, and paste the raw code in there. You don't even need to add a selector or brackets, all you need to do is paste in background-position: your position. 

Pretty simple, right? 

Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Request A WordPress Tutorial
Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram