Firefox

20907 readers

28 users here now

/c/firefox

A place to discuss the news and latest developments on the open-source browser Firefox.

Rules

1. Adhere to the instance rules

2. Be kind to one another

3. Communicate in a civil manner

Reporting

If you would like to bring an issue to the moderators attention, please use the "Create Report" feature on the offending comment or post and it will be reviewed as time allows.

founded 5 years ago

MODERATORS

k_o_t@lemmy.ml

golden_zealot@lemmy.ml

[Solved] Transparent page background without affecting content (lemmy.ml)

submitted 10 months ago* (last edited 10 months ago) by Quail4789@lemmy.ml to c/firefox@lemmy.ml

16 comments fedilink hide all child comments

Is there a way to do this with user CSS on Firefox?

The content has to have full opacity. So setting opacity through the compositor or the opacity CSS property does not count.

Setting a background-color with some alpha on userContent.css technically works but because the browser itself is fully opaque, doesn't show the background. Trying to set background-related properties on #browser on userChrome.css doesn't have an effect. If I can make only the background of #browser transparent, this'll work. But I don't know if that's possible.

edit: it is possible, with lots of caveats. Site-specific fixes will be required, popups are hard to read. If you have dark wallpapers enable dark reader to make site content readable on a dark background.

1- set browser.tabs.allow_transparent_browser to true

2- in userChrome.css add #main-window, #tabbrowser-tabpanels{ background: transparent !important; }

3- userContent.css:

*{
  background-color: transparent !important;
}
/* if you don't want full transparency */
html:root{
  background-color: #00000080 !important;
}

you are viewing a single comment's thread
view the rest of the comments

[–] MrOtherGuy@lemmy.world 1 points 10 months ago* (last edited 10 months ago)

Yeah, !important doesn't affect inheritance in any way. It only means that this particular rule is to be used if there are multiple rules that would set that particular property for the element in question (unless there's some other more specific rule with !important tag as well). MDN lists property inheritance in the formal definition section. You can totally make background-color inherited though - like *{ background-color: inherit } (and then set the property to something else on the root element from which you would want to inherit from) but it would then either not apply if website set it to anything else for an element or override any other set value if you used !important tag.

One other thing worth noting is that I would not recommend the rules mentioned for userChrome.css to be used as is - at least on Windows they completely break Firefox startup - it fails to display any window if you do that. Instead you should add a [sessionrestored] selector to wait a bit before those rules are applied to main-window:

#main-window[sessionrestored], #tabbrowser-tabpanels{ background: transparent !important; }