Question

I’m trying to create a userstyle (installed in Google Chrome as a userscript).
It’s just some CSS to hide everything on the page and only show an image.

html { height:100%; 
       background:url(https://i.stack.imgur.com/1xZIO.png) no-repeat center fixed #FFFFFF !important; 
       overflow:hidden; 
     }
*:not(html) { display:none; }

I’d say there’s something wrong with my understanding of CSS here, but this works in Mozilla Firefox (pasted this code in userContent.css and it behaves as expected).

Also tried body instead of html, visibility:collapse; instead of display:none; and more specific :not selectors.

Here is how userstyles.org makes this CSS into a userscript

Please explain what’s up here! Many thanks!

Answer 1

the following code works fine on my chrome. I removed your @namespace line and applied styles on the html element.

// @description   Block entire websites in style!
// @author        monn43
// @homepage      http://userstyles.org/styles/53487
// @run-at        document-start
// ==/UserScript==
(function() {
var css = "";
if (false || (document.domain == "perezhilton.com" ||document.domain.substring(document.domain.indexOf(".perezhilton.com") + 1) == "perezhilton.com") || (document.domain == "fitperez.com" || document.domain.substring(document.domain.indexOf(".fitperez.com") + 1) == "fitperez.com") || (document.domain == "cocoperez.com" || document.domain.substring(document.domain.indexOf(".cocoperez.com") + 1) == "cocoperez.com") || (document.location.href.indexOf("http://perezhilton.com/") == 0))
css += "html { height:100%; background:url(http://i.imgur.com/oqhgG.png) no-repeat center fixed #FFFFFF !important; overflow:hidden; }\n*:not(html) { visibility:hidden; }";
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
    var node = document.createElement("style");
    node.type = "text/css";
    node.appendChild(document.createTextNode(css));
    heads[0].appendChild(node); 
}
}
})();