Background

The Background field offers unmatched features not found in any other option framework. Users will be able to present the background designs found in professionally authored pages with a few simple clicks.

Table of Contents

• Arguments
• Default Argument
• Default Media Array Options
• Build Config
• Example Config
  • Example Usage

Arguments

Name	Type	Default	Description
type	string	background	Controls the field type
default	string		See Default Argument below.
select2	array		Array of select2 arguments. Select2 Documentation (opens new window).
background-color	bool	true	Flag to display the background color picker.
background-repeat	bool	true	Flag to display the background repeat select field.
background-attachment	bool	true	Flag to display the background attachment select field.
background-position	bool	true	Flag to display the background position select field.
background-image	bool	true	Flag to display the background image media uploader.
background-clip	bool	false	Flag to display the background clip select field.
background-origin	bool	false	Flag to display the background origin select field.
background-size	bool	true	Flag to display the background size select field.
preview_media	bool	false	Flag to display background media preview.
preview	bool	true	Flag to display the background preview box.
preview_height	string	200px	String to set background preview height.
transparent	bool	true	Flag to display background color transparency checkbox.

Also See

• Global Field Arguments
• Using the compiler Argument
• Using the output Argument
• Using the output_variables Argument
• Using the required Argument
• Using the validate Argument

Default Argument

Name	Type	Description
background-color	string	Hex string representing the default background color.
background-repeat	string	String representing the default background repeat value. Accepts: no-repeat repeat repeat-x repeat-y inherit
background-attachment	string	String representing the default background attachment value. Accepts: fixed scroll inherit
background-position	string	String representing the default background position value. Accepts: left top left center left bottom center top center center center bottom right top right center right bottom.
background-image	string	URL string representing the default background image value.
background-clip	string	String representing the default background clip value. Accepts: inherit border-box content-box padding-box.
background-origin	string	String representing the default background origin value. Accepts: inherit border-box content-box padding-box.
background size	string	String representing the default background size value. Accepts: inherit cover contain.
media	array	Array of default background media information. See table below.

Default Media Array Options

Name	Type	Description
id	string	A unique identifier.
width	string	String value setting the width of the image.
height	string	String value setting the height of the image.
thumbnail	string	URL string value to the image thumbnail.

Build Config

Build a Custom Configuration →

Changes you make to this form will be reflected in the generated code.

ID

Type

Title

Desc

Subtitle

Class

Compiler

Output

Output Variables

Required

Field visibility requirements.

Default

Validate

Select2

Background Color

Background Repeat

Background Attachment

Background Position

Background Image

Background Clip

Background Origin

Background Size

Background Image

Preview

Preview Height

Transparent

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array( 'type' => 'background' ) );

Example Config

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array( 'id' => 'opt-background', 'type' => 'background', 'title' => esc_html__('Body Background', 'your-project-name'), 'subtitle' => esc_html__('Body background with image, color, etc.', 'your-project-name'), 'desc' => esc_html__('This is the description field, again good for additional info.', 'your-project-name'), 'default' => array( 'background-color' => '#1e73be', ) ) ); 

Example Usage

This example is based on the code above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

global $redux_demo; // Background color echo 'background color: ' . $redux_demo['opt-background']['background-color']; // Background image. echo 'background image: ' . $redux_demo['opt-background']['background-image']; // Background image options echo 'background repeat: ' . $redux_demo['opt-background']['background-repeat']; echo 'background position: ' . $redux_demo['opt-background']['background-position']; echo 'background size: ' . $redux_demo['opt-background']['background-size']; echo 'background attachment: ' . $redux_demo['opt-background']['background-attachment']; // Media values echo 'image height: ' . $redux_demo['opt-background']['media']['height']; echo 'image width: ' . $redux_demo['opt-background']['media']['width']; echo 'image thumbnail: ' . $redux_demo['opt-background']['media']['thumbnail'];