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


4 Answers 4


@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 {

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 {

Update 2017-11-08: A similar procedure works for Stylus ( 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 {

Short answer

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

.kFx1Ae-xdwExf-eb-m {


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.


  • 3
    As of December 2018, the above pattern didn't work for me. I ended up using "div.g-Qx-eb" successfully. Commented Dec 11, 2018 at 17:14

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


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.
    – d0g
    Commented Nov 24, 2017 at 19:26

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