This members-only tutorial provides the steps to set up a img element to appear like a background for a Section in Oxygen.

The advantages of this approach over the traditional cover background image method are that the:

  1. images will be responsive using WordPress' srcset feature
  2. plugins like ShortPixel Adaptive Images optimize inline images whereas they do not optimize background images.

Step 1

In the Oxygen editor, add a Section.

Add a class of bg-img-section.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($27/month or $169 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • First – thanks for the tutorial. Works great and Shortpixel CDN finally can pick up background images.

    A few gripes:

    #1
    Is there a way to add a solid color background UNDER the image. Let’s say my body bg color is white, but I want this section with inline bg to have a black bg – that is visible until the bg image loads

    adding bg to the section results in image overlay (solid color with transparency) – it’s neat side-effect, but not what I want to achieve – I want to change BG UNDER the image.

    #2
    adding fade-in from oxygen properties gives me really strange results – the bg top-left corner is positioned in the center and the animation is THE SAME no matter what animation I choose from the list

    putting image in a div container and adding animation to the container resolves the problem, but it’s not a elegant solution

    I haven’t tried transition yet – to achieve fade-in

    and one bonus feature request:
    how can I add parallax effect to the bg – any pointers in right direction?

    test site:
    https://tenDESIGN.pro/demo/inline-bg/
    wp 5.2.2
    oxy 2.4.1
    blank install

    • To have the section have a solid background do the following changes. Note that this will make the fancy gradient color overlay from the tutorial to not show up. But since you said you don’t need overlays it should be fine.

      Set your desired background color to the section (ID or class depends on whether you want it just for that section or all “bg-img-section”s).
      Move the Image up so it is the first child of the section.
      For “bg-img” class, comment out or delete “z-index: -1;”.
      Wrap the actual content elements of the section inside a Div. Set its Position to relative.

      After these changes, I tested fade animation for the section and it is working fine.

      how can I add parallax effect to the bg – any pointers in right direction?

      You could research on the various parallax JS scripts. But we are going pretty custom at this time and I will have to leave this and move onto implementing other pending tutorial ideas.

      • ok. I’ve ended up using object-fit instead of that clever trick with transition to center the image – as it was interfering with animations. It could’ve be done by using nested divs, but I’ve wanted to simplify it as much as possible. Maybe I’ll add a fallback option for the (old) browsers that doesn’t support object-fit.

        But I’ve reached my goals:
        – set the bg color from oxygen UI
        – don’t use nested elements (div-wrappers)
        – set everything by adding element + single class

        First image is the final solution
        https://tenDESIGN.pro/demo/inline-bg/

        Thank you for your help.

        • naaah… I’ve got back to your tutorial. Looks like the your “translate(-50%, -50%)” trick is the most reliable solution across all browsers and platforms. I just have to use DIV wrapper if I want to animate the bg (as you’ve said).

          Thanks again.

  • I tried this on a page with a menu. I take it this is just for pages with no menu because it does not stay contained within the inner content area

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: