1

The page in question: http://www.reddit.com/r/pcmasterrace

I want to change this image in the #header from

http://a.thumbs.redditmedia.com/Qe0ePtRsgau_YfN8wmTL67xCd8Y3y1YVcMDk8pdzai0.png

to this new image

https://i.stack.imgur.com/vssLD.png

Is there a way to do it by pasting code in the console panel? (client side)

I tried:

var header = document.getElementById("header");
header.style.backgroundImage = 'url(https://i.stack.imgur.com/vssLD.png)  no-repeat!important';
Yada
  • 30,349
  • 24
  • 103
  • 144
  • Why dont use Greasemonkey? – Nidhoegger Apr 28 '15 at 08:27
  • Yes, you can do that, and your code would work if the `background-image` didn't have `!important` style on it. You can't override `!important` when editing properties via `.style`. This post should help you out: https://stackoverflow.com/questions/462537/overriding-important-style – Christian Apr 28 '15 at 08:30
  • This is an interesting question, in fact, because the problem is related to other rules overriding this one. – Denys Séguret Apr 28 '15 at 08:37

2 Answers2

2

You can use this code, which relies on jQuery (which Reddit allows):

$("#header").attr('style', 'background: url(http://i.imgur.com/htDLyzu.png) no-repeat !important');

Or in JavaScript (requiring no jQuery):

var header = document.getElementById("header");
header.setAttribute('style', 'background:url(http://i.imgur.com/htDLyzu.png) no-repeat !important');
Albzi
  • 15,431
  • 6
  • 46
  • 63
  • .css() doesn't work? why? – Nagendra Rao Apr 28 '15 at 08:37
  • 1
    I believe it's because that there is already code with `!important` in it, which means that the code we're trying to add isn't overwriting, even with `!important`. That means we need to add it inline (by giving it a `style` tag). @Rao – Albzi Apr 28 '15 at 08:38
-1

I am using a script for a BG switcher on my website and this (scrapped down to the basic) works

   document.addEventListener("DOMContentLoaded", function(event) { 

    var bgSrc1 = "http://urlpic1.jpg";
    var bgSrc2 = "http://urlpic2.jpg";
    var bgElem = document.getElementById('showcase-row');
    var num = getRandomArbitrary(0,1);

    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }
    if(num >= 0.5){
        bgElem.style.backgroundImage = "url('" + bgSrc1 + "')";
        bgElem.style.backgroundPosition = "0 -80px";
    }else{
        bgElem.style.backgroundImage = "url('" + bgSrc2 + "')";
    }
});

As you see the only difference are the " " and ' '

noa-dev
  • 3,561
  • 9
  • 34
  • 72
  • I dont want to critizize any of these downvotes but this works for me and works with what you need answer edited – noa-dev Apr 28 '15 at 08:36
  • Chances are you got downvoted because your answer doesn't address the question. Your code **does not** solve the OPs question; his issue has to do with overriding `!important` styles, which your answer does not address. Quotation marks are optional: https://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – Christian Apr 29 '15 at 02:45