{"id":241,"date":"2020-04-22T06:24:32","date_gmt":"2020-04-22T06:24:32","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=241"},"modified":"2021-07-06T09:34:23","modified_gmt":"2021-07-06T09:34:23","slug":"background-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/background-control\/","title":{"rendered":"Background Control"},"content":{"rendered":"\n<p>The background control lets you set the following background properties:<\/p>\n\n\n\n<ul><li>Background color<\/li><li>Background image<\/li><li>Background video (requires <code>bricksBackgroundVideoInit<\/code> script. See code example below)<\/li><\/ul>\n\n\n\n<p>There are various settings for the background image and video. You can exclude color\/image\/video settings via the <code>exclude<\/code> parameter.<\/p>\n\n\n\n<p>As the background control serves most likely as a CSS setting the following example shows you how to set the <code>css<\/code> parameter to apply it to the elements&#8217; <code>.prefix-test-wrapper<\/code> HTML.<\/p>\n\n\n\n<p>Adding a background video requires you to load the <code>bricksBackgroundVideoInit<\/code> script and use the <code>BricksFrontend::get_element_background_video_wrapper()<\/code> method to render it.<\/p>\n\n\n\n<p class=\"callout-blue\">When you just want to set a background color better use the\u00a0<a href=\"https:\/\/academy.bricksbuilder.io\/article\/color-control\/\">color control<\/a>. The background control is handier when using a background image or video on top of the color.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Background extends \\Bricks\\Element {\n  \/\/ Required for background video\n  public $scripts = &#91;'bricksBackgroundVideoInit'];\n\n  \/\/ Set builder controls\n  public function set_controls() {\n    $this->controls&#91;'exampleBackground'] = &#91; \/\/ Setting key\n      'tab' => 'content',\n      'label' => esc_html__( 'Background', 'bricks' ),\n      'type' => 'background',\n      'css' => &#91;\n        &#91;\n          'property' => 'background',\n          'selector' => '.prefix-background-wrapper',\n        ],\n      ],\n      'exclude' => &#91;\n        \/\/ 'color',\n        \/\/ 'image',\n        \/\/ 'parallax',\n        \/\/ 'attachment',\n        \/\/ 'position',\n        \/\/ 'positionX',\n        \/\/ 'positionY',\n        \/\/ 'repeat',\n        \/\/ 'size',\n        \/\/ 'custom',\n        \/\/ 'videoUrl',\n        \/\/ 'videoScale',\n      ],\n      'inline' => true,\n      'small' => true,\n      'default' => &#91;\n        'color' => &#91;\n          'rgb' => 'rgba(255, 255, 255, .5)',\n          'hex' => '#ffffff',\n        ],\n      ],\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    echo '&lt;div class=\"prefix-background-wrapper\">';\n\n    \/\/ Background video\n    echo BricksFrontend::get_element_background_video_wrapper( \n      &#91;'settings' => $settings], \n      'exampleBackground' \/\/ Setting key\n    );\n\n    echo get_bloginfo( 'name' );\n\n    echo '&lt;\/div>';\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The background control lets you set the following background properties: Background color Background image Background video (requires bricksBackgroundVideoInit script. See code example below) There are various settings for the background image and video. You can exclude color\/image\/video settings via the exclude parameter. As the background control serves most likely as a CSS setting the following [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":188,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/241"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/241\/revisions"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}