16

https://hangouts.google.com/ puts some picture as background by default. How to remove it, i.e. leave a monocolor background?

With photo:

enter image description here

Without photo:

enter image description here

  • 1
    If anyone wants to know the motivation for such a request, mine is that Hangouts slows my computer to a crawl, and I'd like to reduce unnecessary bloat as much as possible. – palswim Jul 13 '17 at 5:01
  • @palswim Same here – Franck Dernoncourt Jul 13 '17 at 14:40
10

Short answer

Use a custom CSS manager and apply the below code to https://hangouts.google.com/.

.kFx1Ae-xdwExf-eb-m {
    display:none;
}

Explanation

Google Hangouts doesn't include an option to turn off the background photo. The alternatives are to use the browser developers tools to edit the source code each time the Hangouts page is loaded or to use a custom css manager that help you to save and apply your custom CSS style.

Custom CSS are also called "custom user styles" or just "user styles".

I have being using Stylish for Chrome for the last months but there are other available.

  • .kFx1Ae-xdwExf-eb-m is a selector that select an HTML element by class name. In https://hangouts.google.com the specified class name is used for the div tag used to hold the img tags that call the Hangout background photos.
  • display:none is a style attribute that hides the specified element.

References

  • 2
    As of December 2018, the above pattern didn't work for me. I ended up using "div.g-Qx-eb" successfully. – Alan De Smet Dec 11 '18 at 17:14
9

@Rubén's answer is correct, given the question, but I'd like to slightly improve it with a minor nit:

.kFx1Ae-xdwExf-eb-m, .Id-qy-By {
    display:none;
}

The additional class, Id-qy-By, targets acknowledgements displayed along with photographs retrieved from Google+, such as:

Photo by Alex Wrigley

shared on Google+

(sample screenshot containing above notice)

Note that photos selected from internal repository (gstatic servers) don't include such acknowledgements.

Bottom line is: No photo... No credit! ;-)

P.S.: I'd comment instead of proposing a separate answer but not enough reputation was available at the time of this writing.

Update 2017-01-03: Full rule being used in Stylish (2.0.7 for Firefox 50.1.0), which features tighter filtering for improved performance: domain (hangouts.google.com) and element type (div):

@-moz-document domain("hangouts.google.com") {
  div.kFx1Ae-xdwExf-eb-m, div.Id-qy-By {
    display:none;
  }
}

Update 2017-11-08: A similar procedure works for Stylus (1.1.4.2 for Firefox 56), now that Stylish is (currently) marked legacy:

  1. Create a new rule
  2. In Mozilla Format, press the Import button
  3. Paste the code from the section above
  4. Name the rule (for example, Hangout hide background element)

Update 2018-11-05: CSS class updated after noticing Hangouts back-end upgrade (which changed some infrastructure and, therefore, broke the previous rules for the photo itself):

@-moz-document domain("hangouts.google.com") {
  div.g-Qx-eb, div.Id-qy-By {
    display:none;
  }
}
2

2018 Update. Finally, there is actually an extension. If you are using Google Chrome, you can use the Google Hangouts Editor extension.

0

Also, you could change the background to a color other than black with:

.g-Ue-ad {
    background-color: hsla(151, 33%, 54%, 1) !important;
}
  • OK. And I thought this would be helpful as well. If you don't love black. – Dan Nov 24 '17 at 19:26

protected by Community Feb 16 '18 at 22:50

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.