For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle().
Note:
- We use the
!important flag to cover certain potential conflicts.
- Use
@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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
