{"id":2820,"date":"2024-01-05T00:55:36","date_gmt":"2024-01-05T00:55:36","guid":{"rendered":"https:\/\/www.vuepilot.com\/support\/?post_type=article&p=2820"},"modified":"2024-01-05T01:02:42","modified_gmt":"2024-01-05T01:02:42","slug":"how-to-fix-black-website-background-issues","status":"publish","type":"article","link":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/","title":{"rendered":"How to fix black website background issues"},"content":{"rendered":"

If you are seeing an issue where by your website normally has a white background although within VuePilot it is showing a black background and you are unable to read it, this is because your website does not specify a background colour, and so its background is transparent.<\/p>\n

The VuePilot software has a black background by default, this is to prevent flashing of bright white screens in offices and workplaces when switching between apps and URLs, so you are essentially seeing the background of the VuePilot window behind the web page.<\/p>\n

<\/div>\n
There is a way we can fix this however using our “Smart Page<\/strong>” app.\u00a0 \u00a0We can force the page to have a background colour of white, instead of it being transparent by simply setting the colour of document the body to white, here’s now<\/div>\n

<\/h2>\n

Step 1: Create A New Smart Page App<\/h2>\n

From the VuePilot dashboard, under the apps section, click “Create New App<\/strong>” and select “Smart Page<\/strong>” from the options or click here directly<\/a><\/strong><\/p>\n

In the app configuration screen, give your app a name (maybe just the name of the website or page you are showing) and then paste the URL you want to display into the URL box.<\/p>\n

In the OnReady JavaScript<\/strong> input box, copy and paste the following code, then click save.<\/p>\n

const body = document.getElementsByTagName(\"body\")[0]\r\nbody.style.backgroundColor = \"#ffffff\";<\/pre>\n
\n
Example<\/h3>\n
\"Fix<\/h2>\n
Step 2: Add To Rotation<\/h2>\n
From the same window click the “Add To Rotation<\/strong>” button and select the rotation you wish to add it to.<\/p>\n
 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
If you are seeing an issue where by your website normally has a white background although within VuePilot it is showing a black background and you are unable to read it, this is because your website does not specify a background colour, and so its background is transparent. The VuePilot software has a black background […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","article-category":[66,42],"article-tag":[],"class_list":["post-2820","article","type-article","status-publish","format-standard","hentry","article-category-software","article-category-troubleshooting"],"yoast_head":"\nHow to fix black website background issues – VuePilot<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to fix black website background issues – VuePilot\" \/>\n<meta property=\"og:description\" content=\"If you are seeing an issue where by your website normally has a white background although within VuePilot it is showing a black background and you are unable to read it, this is because your website does not specify a background colour, and so its background is transparent. The VuePilot software has a black background […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/\" \/>\n<meta property=\"og:site_name\" content=\"VuePilot\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vuepilot\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-05T01:02:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@vuepilot\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/article\\\/how-to-fix-black-website-background-issues\\\/\",\"url\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/article\\\/how-to-fix-black-website-background-issues\\\/\",\"name\":\"How to fix black website background issues – VuePilot\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/#website\"},\"datePublished\":\"2024-01-05T00:55:36+00:00\",\"dateModified\":\"2024-01-05T01:02:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/article\\\/how-to-fix-black-website-background-issues\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/article\\\/how-to-fix-black-website-background-issues\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/article\\\/how-to-fix-black-website-background-issues\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to fix black website background issues\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/#website\",\"url\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/\",\"name\":\"VuePilot\",\"description\":\"Digital signage help and assistance\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/#organization\",\"name\":\"VuePilot\",\"url\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vuepilot.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/vuepilot-social-banner.jpg\",\"contentUrl\":\"https:\\\/\\\/www.vuepilot.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/vuepilot-social-banner.jpg\",\"width\":1200,\"height\":630,\"caption\":\"VuePilot\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vuepilot.com\\\/support\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/vuepilot\",\"https:\\\/\\\/x.com\\\/vuepilot\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to fix black website background issues – VuePilot","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/","og_locale":"en_US","og_type":"article","og_title":"How to fix black website background issues – VuePilot","og_description":"If you are seeing an issue where by your website normally has a white background although within VuePilot it is showing a black background and you are unable to read it, this is because your website does not specify a background colour, and so its background is transparent. The VuePilot software has a black background […]","og_url":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/","og_site_name":"VuePilot","article_publisher":"https:\/\/www.facebook.com\/vuepilot","article_modified_time":"2024-01-05T01:02:42+00:00","twitter_card":"summary_large_image","twitter_site":"@vuepilot","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/","url":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/","name":"How to fix black website background issues – VuePilot","isPartOf":{"@id":"https:\/\/www.vuepilot.com\/support\/#website"},"datePublished":"2024-01-05T00:55:36+00:00","dateModified":"2024-01-05T01:02:42+00:00","breadcrumb":{"@id":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vuepilot.com\/support\/article\/how-to-fix-black-website-background-issues\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vuepilot.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to fix black website background issues"}]},{"@type":"WebSite","@id":"https:\/\/www.vuepilot.com\/support\/#website","url":"https:\/\/www.vuepilot.com\/support\/","name":"VuePilot","description":"Digital signage help and assistance","publisher":{"@id":"https:\/\/www.vuepilot.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vuepilot.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vuepilot.com\/support\/#organization","name":"VuePilot","url":"https:\/\/www.vuepilot.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vuepilot.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.vuepilot.com\/wp-content\/uploads\/2020\/06\/vuepilot-social-banner.jpg","contentUrl":"https:\/\/www.vuepilot.com\/wp-content\/uploads\/2020\/06\/vuepilot-social-banner.jpg","width":1200,"height":630,"caption":"VuePilot"},"image":{"@id":"https:\/\/www.vuepilot.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vuepilot","https:\/\/x.com\/vuepilot"]}]}},"_links":{"self":[{"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/article\/2820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/comments?post=2820"}],"version-history":[{"count":9,"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/article\/2820\/revisions"}],"predecessor-version":[{"id":2830,"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/article\/2820\/revisions\/2830"}],"wp:attachment":[{"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/media?parent=2820"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/article-category?post=2820"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/www.vuepilot.com\/support\/wp-json\/wp\/v2\/article-tag?post=2820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}