Background Layers #
The stacking order for the background layer can be seen in the illustration below.
- Elements place inside the row (top)
- Shape Divider Layer
- Color Overlay Layer
- Background Image/Video Layer
- Background Color (bottom)
Background Image #
You can add a background image to any row by using the “Upload image” button in the background tab of your row settings. Once an image is supplied, some new options will appear which relate to the display of your background image.
- Background Image Mobile Hidden: Allows you to optionally remove the background image from displaying on mobile devices (when the browser window is less than 1000px wide). This can be useful if you wish to simply your row styling to only use a background color, when the users screen size is smaller.
- 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.
- Background Repeat: If you’re trying to use a pattern that is meant to repeat, you change this option to “repeat”. If a standard image is uploaded, leave this as no-repeat. When no-repeat is selected, the background size of your row will use the CSS value “cover” to automatically scale image to fit your row and leave no excess space.
Video Background #
- Video Color Overlay: (Legacy option). Allows you to specify a color overlay that will go on top of your video background. For users above version 9 of Salient, you can use the more powerful color overlay tab in the row options instead.
- YouTube Video URL: You can supply a URL from YouTube to populate your video BG if you don’t want to self host it. However, note that with this option, there is no possibility of mobile playback. If you would like your video background to also play on mobile, you must use the self hosted option instead.
- 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
Mouse Based Parallax #
Allows you to add multiple background layers to your row which will respond at different sensitivity to mouse movement, creating a parallax effect. When activating this option new inputs will open up for you to configure the effect.
- Scene Positioning: The general alignment of the parallax images.
- Scene Parallax Overall Strength: How much the scene will respond to mouse movement.
- Scene Layers One-Five: The inputs to upload the images for each scene.
