How to center center image in Oxygen


YouTube video

Written By

Jonathan Jernigan

In Oxygen, it’s not immediately clear how you might center a background image vertically and horizontally. This is super easy to achieve.

When you have an element like a section or a Div selected, go to Advanced > Background and scroll down until you see Left and Top.
The little blue text that says “px” to indicate pixels is clickable. Change to a percentage.
center center image in oxygen

Enter 50 for both the left and the top and your image will now be centered both horizontally and vertically.

You can always change this to be something other than 50 to get the positioning you need. In addition, you can change the background position as your viewport size decreases and the position of the background image will be maintained at each breakpoint to give you full control over the images position. Pretty cool, huh?

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.