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:
In the Oxygen editor, add a Section.
Add a class of bg-img-section.
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
Can you provide the URL of your site?
hello. Now I can use inline background image thanks to you.
Is it possible to make inline image in fixed image? I want to know the css thank you!
Try position: sticky.
https://www.w3schools.com/howto/howto_css_sticky_element.asp
Thank you!
And there is another question.
I can’t follow [WordPress’ srcset feature] this step. How can I input html in img?
Can you tell me specific css code you put in this tutorial?
Hi Sidhar, This works great for a ‘background’ image for the section. If I want to do the same with a div, can this also be acheived?
I’m using this solution but the image is getting distorted as the screen size gets smaller.
Leave a Reply