{"id":153,"date":"2023-09-27T04:17:58","date_gmt":"2023-09-27T04:17:58","guid":{"rendered":"https:\/\/docs.codevibrant.com\/azure\/?p=153"},"modified":"2024-01-09T10:00:55","modified_gmt":"2024-01-09T10:00:55","slug":"how-to-set-background-color-image-for-the-main-banner","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/azure\/how-to-set-background-color-image-for-the-main-banner\/","title":{"rendered":"How to Set Background Color\/Image for the Main Banner"},"content":{"rendered":"\n<p>In case you want to segregate different sections of your site to enhance user experience, you can utilize <strong>Background Color\/ Image<\/strong> settings.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"378\" src=\"http:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner-Banner-Background.jpg\" alt=\"Main Banner Background Customizer\" class=\"wp-image-154\" style=\"width:213px;height:336px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner-Banner-Background.jpg 240w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner-Banner-Background-190x300.jpg 190w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Video Guidance<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Azure Complete Walkthrough\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-BAtD90lTGg?start=1589&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Starts from the relative time.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">In order to set Background Image or Color for Main Banner<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, open your theme customizer by navigating to <strong>Appearance &gt;&gt; Customizer<\/strong><\/li>\n\n\n\n<li>Then, navigate to <strong>FrontPage &gt;&gt; Main Banner<\/strong><\/li>\n\n\n\n<li>There are two tabs, <strong>General and Design<\/strong> Tab of which <strong>General Tab<\/strong> is selected by default.<\/li>\n\n\n\n<li>Click on <strong>Design<\/strong> Tab<\/li>\n\n\n\n<li>Based on your preference, you can select either <strong>Color<\/strong> or <strong>Image<\/strong> for <strong>Banner Background Type.<\/strong><\/li>\n\n\n\n<li>After you have selected <strong>Color<\/strong> or <strong>Image<\/strong>, you can either select color from the color palette or upload an image from your storage respectively.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In case you want to segregate different sections of your site to enhance user experience, you can utilize Background Color\/ Image settings. Video Guidance In order to set Background Image or Color for Main Banner<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,7],"tags":[],"class_list":["post-153","post","type-post","status-publish","format-standard","hentry","category-main-banner-settings","category-frontpage-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":2,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/153\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/153\/revisions\/407"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/categories?post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/tags?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}