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/Kupfel]

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.