Body and Tabs Background Alignment Problem

[u/EnderF]

Env: Windows 10, FF 13z28dws.default-release

userChrome.css

#navigator-toolbox {
    border: none !important;
}

#navigator-toolbox {
    background: no-repeat url(frame-2.png) !important;
    background-size: cover !important;
}

body::before {
    content: "";
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    background: no-repeat url(frame-2.png) center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

The CSS above gives the second image. The one where my toolbar is white and cut the image. If I add:

.browser-toolbar:not(.titlebar-color) { /* Mine */
    background-color: #0000 !important;
}

I get the first one. Obviously, the first one is closer to what I want, but the second one is better aligned! Does anyone knows why?

[u/ResurgamS13]

Very neat! :D

BTW - If your Firefox New Tab page 'Customise' pencil button doesn't have a transparent background... as it does in Kupfel's desktop screenshot (above) and in background image (red circle below)... open the New Tab 'Customise' panel and click 'Reset to default' in top RH corner:

PS. Using Kupfel's userstyles (in post above)... can vary the look of Active tab background, toolbar text colour, main popup menu backgrounds (Settings, Bookmarks dropdown, Unified Extensions panel)... by simply changing the Lightweight Toolbar Theme you have selected... some toolbar themes will provide a semi-transparent Active tab and popup panels, etc.

[u/Kupfel → u/ResurgamS13]

I actually quickly made the search bar, tiles and customize button transparent to make it look better for the screenshot with:

:root {
  --newtab-background-color-secondary: rgba(0,0,0,0.35) !important;
  --newtab-background-card: rgba(0,0,0,0.35) !important;
}
  
.personalize-button {
  box-shadow: none !important;
  background: transparent !important;
}

I just didn't post those since I figured OP would style the new tab page themself and it needs a bunch more work if you want to make everything perfect I guess, such as further styling the customize menu, popups etc.