Menu
I'm trying to set the background image of the body, but only where it uses the class banner_url. The HTML is as follows:
<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1"> Basically, I would like to force the page to use the following CSS instead:
.banner_url { background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } I am trying to do this using Greasemonkey if it makes any difference. Does anyone know how I can go about this? I started with the following, however haven't had much luck:
function randomBG(){ document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;"; } randomBG(); 
312
Tampermonkey is used to run so-called userscripts (sometimes also called Greasemonkey scripts) on websites. Userscripts are small computer programs that change the layout of a page, add or remove new functionality and content, or automate actions.
Tampermonkey has it's own built-in editor. Just hit the Tampermonkey button and select Dashboard. To get a new script, hit the little + tab in the upper right. You'll get a nice template with an IIFE (Immediately Invoked Function Expression) that you should put all your code in to avoid global namespace pollution.
For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle().
Note:
!important flag to cover certain potential conflicts.@run-at document-start (or use Stylus, see below) to minimize "flicker" associated with changing styles after the initial render.A complete script:
// ==UserScript== // @name _Override banner_url styles // @include http://YOUR_SERVER.COM/YOUR_PATH/* // @grant GM_addStyle // @run-at document-start // ==/UserScript== GM_addStyle ( ` .banner_url { background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } ` ); Note that if you are using Greasemonkey 4, it has busted GM_addStyle() (and a great many other things).
It is strongly recommended that you switch to Tampermonkey or Violentmonkey.
In fact, Greasemonkey's controlling developer says as much himself.
In the mean time, here's a shim for those masochists that persist with GM4:
function GM_addStyle (cssStr) { var D = document; var newNode = D.createElement ('style'); newNode.textContent = cssStr; var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement; targ.appendChild (newNode); } Also, for pure CSS manipulation, the Stylish Stylus extension is a better choice than Greasemonkey/Tampermonkey.
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
