AddFunc Backgrounds adds a Backgrounds content type your WordPress website. The Backgrounds editor makes it easy to create multi-layered backgrounds for your website, which you can then select for use on any Page or Post. Add an image or a video from your Media Library, add a color or gradient, control positioning and how/whether to repeat or not, do it again on another layer or few and even make it all a parallax!*
A Background consists of up to 9 optional layers, which are:
* Body Represents and affects the
* Window Represents the window or viewport, as well as the above the fold area.
* Wall Represents the remainder of the page or the below the fold area.
* Video A layer for adding a video to the background.
* Image Basic layers, primarily for adding images (although they have other optional uses).
* Overlay Overlays all other layers.
All layers support:
* Image (except for the Video layer)
* Gradient (overwritten by the image if set)
* Opacity (except for the Body layer)
* Fill (a.k.a. background-size how the image fills the layer)
* Repeat (whether or not and which direction to repeat the image)
* Scrolling (a.k.a. background-attachment whether image is to remain fixed to the screen or stick to the page when scrolling)
* X/Y Position (how the image is to align horizontally and vertically)
* Raw HTML
Layers that support the parallax feature are:
* Image layers
* Video layer
The Body Layer/Settings)
This is affectively the
tag. Features applied here will modify the
tag of your page/post. Please note the Parallax feature does modify the
with some CSS in order to make the parallax effect work, though you shouldnt be able to see these modifications (if you can, you may need to forgo the parallax feature in such a case, unless you know how to fix it using CSS).
The Window Layer/Settings
This layer adds an element covering the window/viewport area above the fold the area you first see when the page loads. By default it matches the height of the window/viewport. This height can be adjust in cases where a fixed bar or menu runs across the top or bottom of your website, or for any other specialized case scenario. The Window layer never drops below this height setting (or the window/viewport height by default).
The Wall Layer
This layer adds an element wrapping the remainder of the page after the Window layer below the fold. The Wall respects the Window height, hence will begin wherever the Window ends.
These 4 are the most basic and include the most features. Each one can be easily converted to an
, making it more suitable for an SVG and other specialized content. When Parallax is on, Image layers instantly have their own depth, which can be adjusted with the Z Position field.
The Video Layer
The Video layer allows you to add a background video. Though this is a specialized layer, it does allow most of the same features as an Image layer, even parallax! The Alternate Source field allows you to upload an additional video format to support a wider range of browsers. As a background video should, this layer automatically plays, loops and mutes your video.
The Overlay covers the entire background from the top of the page to the bottom. It is best used for semitransparent backgrounds, so as to allow underlying layers to show through.
*Note: Due to the nature of a CSS parallax, some use cases may be limited or unworkable. Fortunately, the Parallax feature can be turned on or off with the flip of a switch. Also, the CSS parallax technique is currently not supported on iOS devices. The fallback for this of a static background is automatic.
- Upload the plugin files to the
/wp-content/plugins/directory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin through the Plugins screen in WordPress.
- Create Backgrounds as needed using the Add New button/option.
- From any page or post, use the Background metabox, so select any of the Backgrounds youve created.
In CSS, a gradient is considered an image, so only one of these can be displayed on any given layer. If you wish to overlap an image and a gradient, try adding them to different layers.
These layers each have a special purpose and would be unworkable (even disastrous) as a CSS parallax layer.
The Body layer is the
of your web page. If this were used for a CSS parallax layer itself, it would break the entire page. It has to house all of the other layers of the parallax. The
element is the reason this CSS parallax scrolling effect works.
The purpose of the Window is to cover the top above the fold area of the page. The purpose of the Wall is to cover the remaining below the fold area of the page. The purpose of the Overlay is to cover the entire page. Therefore, these would not make sense as parallax layers. Further, if they used as parallax layers, they would not be able to serve their nomenclatural purpose.
Using the 4 Image layers and the Video layer provide a lot of dimension to the parallax. It is recommended to use only these for this effect, as adding too many layers can slow down page interaction response time and degrade the user experience.
Much research and experimentation was done to determine the optimum method for a parallax effect. Though there are pros and cons to each, we chose the CSS method for its performance purposes. The CSS method utilizes graphic card acceleration, which in most cases will provide the most ideal user experience.
This is in consideration.
Videos are muted because the purpose of a background video is for it to display as a background. This can distract visitors from your content enough as it is, which is probably why smartphones will not autoplay your video unless it is muted.