Background Layers #
The stacking order for the background layer can be seen in the illustration below.
- Elements place inside the column (top)
- Color Overlay Layer
- Background Color
- Background Image/Video Layer (bottom)
Background Image #
You can add a background image to any column by using the “Upload image” button in the background tab of your column settings. Once an image is supplied, some new options will appear which relate to the display of your background image.
- Background Position: Define an alignment for your background image within the row. By default, the image will be anchored to the left top of the row.
- Scale Background Image To Column: Automatically adjusts the image to fit the size of your column. This option is recommended in most cases, unless If you’re trying to use a pattern that is meant to repeat.
Video Background #
- WebM File URL: If you’re self hosting, you must supply this format to ensure cross browser compatibility.
- MP4 File URL: If you’re self hosting, you must also supply this format to ensure cross browser compatibility.
- OGV File URL: Optional file format to supply for self hosting
- Video Preview Image: The image that will be used in place of your video BG on mobile devices. This is only used when you have the Salient theme option “Disable Video Backgrounds On Mobile Devices” activated. (Salient options panel > general settings > functionality tab).
Troubleshooting self-hosted video background playback #
1. Ensure that your server is capable of parsing video files. Some servers require you to add the media types supported in the .htaccess file in order for them to parse the files. Open up your .htaccess file located in the root of your WordPress install and add this in:
AddType video/mp4 .mp4
AddType video/mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/webm .webmv
If unsure that your server is configured to playback videos correctly, try inputting a video hosted from ThemeNectar and test playback:
http://themenectar.com/videos/video-test.mp4
2. Ensure that your videos are correctly encoded for web playback. If you’ve added the media types to your server and are still running into difficulty, please run your videos through these converters:
http://video.online-convert.com/convert-to-mp4
http://video.online-convert.com/convert-to-webm
Background Color #
In columns, the background color layer sits on-top of the background image. This is to provide the ability to animate the opacity on hover over the image.
