How can I remove the background in the Hangouts?

Question

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

With photo:

Without photo:

Answer 1

@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;
  }
}

Answer 2

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

• https://www.w3.org/Style/CSS/
• Hangouts Help

Answer 3

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

Answer 4

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

.g-Ue-ad {
    background-color: hsla(151, 33%, 54%, 1) !important;
}