{"id":220,"date":"2019-02-27T16:35:00","date_gmt":"2019-02-27T16:35:00","guid":{"rendered":"https:\/\/rockythemes.com\/nimva3\/docs\/?p=220"},"modified":"2019-02-27T16:41:59","modified_gmt":"2019-02-27T16:41:59","slug":"how-to-set-a-background-image-for-your-entire-site","status":"publish","type":"post","link":"https:\/\/rockythemes.com\/nimva3\/docs\/how-to-set-a-background-image-for-your-entire-site\/","title":{"rendered":"How to set a Background Image for your entire site"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To setup a background image for your entire site, navigate to <strong>Theme Options -> Background -> Image Background Options<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the <strong>Background Image<\/strong> field to choose an existing image from your Media Library or upload your own image. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"413\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image.jpg\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image.jpg 902w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image-300x137.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image-768x352.jpg 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">An important setting that must be active is the <strong>Site Layout<\/strong> to be set as <strong>Boxed<\/strong>, otherwise the background Image will not be displayed. Scroll up and under <strong>Site Layout Settings -> Site Layout<\/strong> choose <strong>Boxed<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"905\" height=\"172\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/site-layout-3.jpg\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/site-layout-3.jpg 905w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/site-layout-3-300x57.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/site-layout-3-768x146.jpg 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Your site will now look similar to the following example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"520\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/boxed-background.jpg\" alt=\"\" class=\"wp-image-226\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/boxed-background.jpg 960w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/boxed-background-300x163.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/boxed-background-768x416.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the settings provided under Image Background Options to adjust the background repeat as well as setting it as Fullscreen or enable the Parallax effect.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"881\" height=\"335\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image-2.jpg\" alt=\"\" class=\"wp-image-224\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image-2.jpg 881w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image-2-300x114.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/background-image-2-768x292.jpg 768w\" sizes=\"auto, (max-width: 881px) 100vw, 881px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Background Repeat<\/strong> &#8211; set how the background image will be repeated throughout the page<\/li><li><strong>Enable Parallax effect <\/strong>&#8211; use this option to enable a parallax effect on vertical scroll. This requires your image to have a bigger height so the parallax effect can work correctly.<\/li><li><strong>Fullscreen Background Image<\/strong> &#8211; set this option to force the image take the entire width and height of the browser window. The background image will also be fixed on scroll.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Adding a background image using the Theme Options interface<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-220","post","type-post","status-publish","format-standard","hentry","category-getting-started"],"_links":{"self":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":3,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/220\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}