Control background color, video, image, and more with the settings inside Advanced > Background.
Background Color
Set the background color of the element.
Background Image
Set an image for the background. If the image is unable to load, the color will be used.
You can set the image in three ways:
- Specify the URL to the image
- Upload or use an existing image in WordPress Media Library by clicking Browse
- Set the background image to Dynamic Data, such as the post's featured image, by clicking Data
Image Overlay Color
If the background image is set, you can darken, lighten, and colorize the image.
Use this option to ensure text placed on background images has enough contrast to be easily readable.
Use the opacity slider at the bottom of the color picker to adjust the transparency of the overlay color, ensuring the background image shows through.
Background Size
- auto - Uses the image’s original height and width.
- cover - Scales the image so that it completely covers the element’s background.
- contain - Scales the image so that it is completely contained inside the element.
- manual - Manually set the width and height of the image.
Background Repeat
- repeat - The background image is repeated both vertically and horizontally.
- repeat-x - The background image is repeated only horizontally.
- repeat-y - The background image is repeated only vertically.
- no-repeat - The background image is not repeated. The image is only shown once. This is the default.
Background Attachment (Parallax)
- scroll - the position of the background image will be fixed to the element and will scroll along with the element and page.
- fixed - the position of the background image will be fixed to the page and will not scroll up and down with the element
Use fixed for a parallax scrolling effect.
Background Position (Left and Top)
Entering Top and Left values positions the image at these respective distances from the upper left corner of the element.
Background Clip
- border-box - the background extends to the outer edge of the element's border
- padding-box - the background extends to the inner edge of the element's border
- content-box - the background extends to the beginning of the element's padding
Background Blend Mode
Background blend modes allow you to set how an element’s background image should blend with the element’s background color or gradient.
- Normal - No blending is applied.
- Multiply - Background color and background image are multiplied, typically resulting in a hued image that is darker than the original.
- Screen - Both background image and color are inverted, multiplied, and then inverted again.
- Overlay - The background color is mixed with the image.
- Darken - Replaces parts of the image that are lighter than the background color with the background color.
- Lighten - Replaces parts of the image that are darker than the background color with the background color.
- Color-dodge - The background color is divided by the inverse of the background image.
- Color-burn - The background color is inverted, divided by the background image and then inverted again.
- Hard-light - Parts of the background image that are lighter than the background color are treated as having the “multiply” blend mode, and parts of the image that are darker than the background color are treated as having the “screen” blend mode.
- Soft-light - Similar to hard-light but more diffused in appearance.
- Difference - The darkest colors of the background image and background color are subtracted from the lightest ones. Results in a high contrast image.
- Exclusion - Similar to difference, but with lower contrast.
- Hue - The hue of the background image is combined with the luminosity and saturation of the background color.
- Saturation - The saturation of the background image is retained while mixing the luminosity and hue of the background color.
- Color - Mixes the hue and saturation of the background image with the luminosity of the background color.
- Luminosity - The luminosity of the background image is preserved while using the hue and saturation of the background color.
Setting a Video Background
Oxygen allows setting a video as the background for section elements only. To set video backgrounds for other elements, use the Video Background plugin.
Video Background URL
The video needs to be in an .mp4 or .webm file format.
You can set the video in two ways:
- Specify the URL to the video
- Upload or use an existing video in the WordPress Media Library by clicking Browse
Tip: store your video background on a service like Cloudinary for fast loading.
Hide Video Below
To hide a video background below a certain screen width, select the screen width in the list.
Video backgrounds work best on large screens, which are commonly found on desktop and laptop devices with fast internet connections. Mobile users often have slower connections and therefore using a video background is not recommended.
Video Overlay
If the background video is set, you can darken, lighten, and colorize the video.
Use this option to ensure text placed over the background video has enough contrast to be easily readable.
Use the opacity slider at the bottom of the color picker to adjust the transparency of the overlay color, ensuring the background video shows through.
