67

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();
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Xeo
  • 831
  • 2
  • 10
  • 14

2 Answers2

124

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.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • Thanks. I didn't realise that was possible! I've actually got some javascript to randomise the images so I need to use GM. Will give this a go and let you know! – Xeo Oct 16 '13 at 08:50
  • OK, that works. However out of interest, do you know how I would use elements such as -o-background-size in pure javascript? – Xeo Oct 16 '13 at 08:55
  • Omit the prefix for that property and use DOM-standard notation for style properties. For example: `.style.backgroundSize="60px 80px"`. Browser-specific prefixes are a special case, but you don't need them for `background-size`; all modern+major browsers support it. (Search CSS questions for when you need to fuss with browser prefixes.) – Brock Adams Oct 16 '13 at 10:42
  • 22
    Note that you must add `// @grant GM_addStyle` to the top of the file! – totymedli Jun 10 '16 at 14:05
  • @BrockAdams You're free to include a solution to other addons but please don't edit the question to ask for that; you're changing OP's intent and also potentially invalidating existing answers. – TylerH May 26 '18 at 18:03
  • 1
    @TylerH, nonsense, I did not change the user's intent nor invalidate any answers. That's because this question has applied to Tampermonkey, equally, since Tampermonkey has existed, BY DESIGN. Please do not retag/edit outside your subject expertise. – Brock Adams May 26 '18 at 18:05
  • @BrockAdams Please do not assume peoples' expertise or lack thereof; you're most likely going to be wrong. GM and TM are very similar but are not the same thing and *do* have incompatibilities. OP didn't ask about Tampermonkey, so please don't put those words into their mouth. – TylerH May 26 '18 at 18:11
  • @TylerH, your tag scores show your lack of expertise, and the question and answers apply equally to other engines in this case (and most GM/TM cases). Question askers frequently use the wrong tags and fail to know commonalities. – Brock Adams May 26 '18 at 18:13
  • 1
    @BrockAdams Tag scores don't cover every technology a user knows or uses or is even interested in. There's no rule on the site that says you are not allowed to know about something without having a tag score in it. – TylerH May 26 '18 at 18:18
  • @TylerH, true. But your actions also prove your lack of expertise, on this subject, and you are required to have tag scores to unlock certain privileges. – Brock Adams May 26 '18 at 18:20
  • @BrockAdams My actions prove a desire to keep a question about one thing about that one thing rather than two similar, yet different things. There is also no privilege in use here that requires that I have a certain tag scores. Tag score-related privileges are: Mjolnir and tag synonymization (and nothing else) – TylerH May 26 '18 at 18:22
  • @TylerH, and my actions prove a desire to reduce duplication of Q&A's that are the same in all essential parameters. A user mistagging a question does not mean that the missing tags do not apply. – Brock Adams May 26 '18 at 18:25
  • @BrockAdams I don't disagree with that, but I disagree that OP "mistagged" the question. He was asking about Greasemonkey, not Tampermonkey, or Violentmonkey, and any other future permutations that might arise. – TylerH May 26 '18 at 18:33
  • @TylerH, that does not mean that the tags and answers do not apply perfectly to later later technologies. In this case they do. We do not need the same Q&A duplicated 4 or more times for TM, GM, VM, Scriptish, etc. on points where they are by design the same. (Or close enough in the case of GM4) – Brock Adams May 26 '18 at 18:40
  • **strongly recommended that you switch** To be fair the linked article merely suggests to users that for scripts which are not updated by authors; **you might want to install**... The API change was a progress (async methods). The only fault GM did is lack of docs and maybe that the plugin does not detect old scripts and apply polyfill itself. [The polyfill is ready and easy to use](https://github.com/greasemonkey/gm4-polyfill) Maybe they thought forcing it on authors will speed the change. – papo Dec 06 '19 at 21:06
  • I don't know if Stylus is better because Violentmonkey works just fine. It would be useful to mention the advantages of Stylus instead of just saying it is better. The advantage of Greasemonkey / Violentmonkey is that you can do everything with 1 addon only: adding JavaScript and CSS to websites. Using less addons can be better for performance also. – baptx Nov 25 '22 at 22:19
4

What about something like this ?

document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";

But I must admit I'm not sure to understand the question

Laurent S.
  • 6,816
  • 2
  • 28
  • 40
  • Basically, I want to use javascript to force the css above into the page – Xeo Oct 15 '13 at 16:05
  • Above worked, however need to be able to set the rest of the css. Setting the parameters for the background image stops it from working. – Xeo Oct 15 '13 at 16:07
  • 1
    How many different backgrounds do you have ? Would it be acceptable to have them listed somehow in the CSS file or would the list be dynamic content loaded from the server ? I'm not into GreaseMonkey myself so I don't know how far it goes. In "normal" HTML+CSS, my answer should only have impact on the background-image, leaving all other properties as specified in the css file – Laurent S. Oct 15 '13 at 16:13