{"title":"Adding and Customizing the Background with Phlox Background Settings","id":36815,"link":"https:\/\/env.averta.net\/en\/step\/adding-and-customizing-the-background-with-phlox-background-settings\/","parent":[35058],"content":"<h3>Website Background<\/h3>\n<p>To customize the background settings of your website first you need to set the website layout to boxed:<\/p>\n<ol>\n<li>Go to your <strong>WordPress admin panel<\/strong><\/li>\n<li>Click the?<b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Go to the <b>Customize &gt; General &gt; General Layout<\/b><\/li>\n<\/ol>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/SefEG3KOYcI?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/website-background.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36857 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/website-background.jpg\" alt=\"website-background\" width=\"303\" height=\"1728\" \/><\/a><\/p>\n<p>Then you can find the related options in the customizer by below steps:<\/p>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the?<strong>Appearance &gt; Customize<\/strong><\/li>\n<li>Navigate?<strong>Appearance &gt; Website Background<\/strong><\/li>\n<\/ol>\n<h4>Enable Background<\/h4>\n<p>By switching on this option, all the options will appear, and you can customize the background of the website.<\/p>\n<h4>Background Color<\/h4>\n<p>Specifies the background color of the website&#8217;s body.<\/p>\n<h4>Background Image<\/h4>\n<p>Add an image you want to appear as a background. If you do not add an image, just the color you have chosen will display as your website background.<\/p>\n<h4>Background Size<\/h4>\n<p>Your image can be shown three sizes: Auto, Contain, and Cover<\/p>\n<ul>\n<li>On auto mode, the image?will appear at the top of the website and on its actual size.<\/li>\n<li>On contain mode, the image will be scaled?to the largest size. It means that the image&#8217;s width and height can fit in the content area.<\/li>\n<li>On cover mode,?the background image appears as large as possible and the background area is fully covered by the image.<\/li>\n<\/ul>\n<h4>Background Pattern<\/h4>\n<p>Your background, with or without image, can have various patterns. Select any pattern you want to apply on your background.<\/p>\n<h4>Background Repeat<\/h4>\n<p>You are able to specify the background image repetition:<\/p>\n<ul>\n<li>No Repeat<\/li>\n<li>Repeat Horizontally and Vertically<\/li>\n<li>Repeat Horizontally<\/li>\n<li>Repeat Vertically<\/li>\n<\/ul>\n<h4>Background Position<\/h4>\n<p>There are different alignments for background image:<\/p>\n<ul>\n<li>Left, Center, or Right Top<\/li>\n<li>Left, Center, or Right Center<\/li>\n<li>Left, Center, or Right Bottom<\/li>\n<\/ul>\n<h4>Background Attachment<\/h4>\n<p>The background image can be scrollable or fixed.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Content Background<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/content-background.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36860 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/content-background.png\" alt=\"content-background\" width=\"314\" height=\"304\" \/><\/a><\/h3>\n<p>Unlike the website background settings, this option is created for changing the wrapper and header background color. To find the option follow below steps:<\/p>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the?<strong>Appearance &gt; Customize<\/strong><\/li>\n<li>Navigate?<strong>Appearance &gt;?Content Background<\/strong><\/li>\n<\/ol>\n","type":"solution"}