Window background across the whole window


  • Moderator

    Housekeeping
    Here is a related feature request: https://forum.vivaldi.net/topic/26946/stretch-window-background-image-to-the-bookmarks-bar
    (I made a mock-up mod to test it out, and @potmeklecbohdan suggested I share it.)

    Preview
    Here is an image showing the mod in action across various themes
    https://forum.vivaldi.net/assets/uploads/files/1542920468773-2018-11-22_20-58-51.gif

    Installation
    It takes the form of a CSS mod

    #browser.theme-light {
        background: url("../resources/bg.jpg");
        background-size: cover;
    }
    
    #browser.theme-dark {
        background: url("../resources/bg_alt_7.jpg");
        background-size: cover;
    }
    
    #tabs-container, .inner, #main, .vivaldi-settings .settings-content, .startpage, .startpage .manager {
        background: transparent !important;
    }
    
    .tab.active, .toolbar-addressbar, #switch, #footer, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .startpage .manager > div {
        background:  var(--colorBgAlpha) !important;
        background-color:  var(--colorBgAlpha) !important;
    }
    
    .private-intro {
        background: var(--colorBgAlphaHeavy);
    }
    
    

    The first two rules define the background image to use. (This one is a bit haphazard, so I might have missed something from one of my other mod files, let me know if it is the case).

    TODOs

    I had previously not shared this as it feels a little unpolished, so if you have any tweaks to suggest that would improve it, please share them.

    Notably: Some borders and button :hovers don't look very nice. And there's a difficult balance to strike between showing the image and maintaining readability of text. For this reason in particular, I haven't extended it to panels.

    Also, in my original post I mentioned Microsoft Acrylic. I never quite managed to achieve that, so if anyone has ideas on how to more closely match it, this would be a good place to share.



  • @LonM What would be Vivaldi without you? πŸ€—



  • Hm, I tried out the mod, and the mod effect shows up correctly for a split second before the Start Page background image area turns white (which is not my Start Page background). Same on the settings pageβ€”the mod effect also shows up correctly for a split second before the settings page background turns white. I also cannot right-click on the Start Page background image area when using the mod. Tested without any mods, so it's not another mod interfering. Looked in console and don't see any messages that seem relevant. I'm using a modified Subtle theme (changed the corner rounding) if that's relevant.



  • @LonM Nice, I did some quick tests and it works fine.
    Cool mod πŸ˜›

    Playground code. (aka known as experiment)
    I'm trying to adapt this for my workjoyflow: vertical tabs.
    It kinda works, but obviously as this force a white text/button on some bars, it also make invisible them on any "pure white" background picture.
    I probably should try some awkard selectors on these. But colorful images are better πŸ˜‰

    #browser.theme-light {
       background: url("../resources/bg.jpg");
       background-size: cover;
    }
    #browser.theme-dark {
       background: url("../resources/bg_alt_7.jpg");
      background-size: cover;
    }
    .bookmark-bar, #tabs-container, .inner, #main, .vivaldi-settings .settings-content, .startpage, .startpage .manager {
       background: transparent !important;
    }
    .bookmark-bar .observer button,
    .bookmark-bar button.chevron {background-color: rgba(0, 0, 0, 0.3);}
    #header, .toolbar-addressbar, .sync-and-trash-container, .newtab {
         background:  rgba(0, 0, 0, 0.3) !important;
         background-color: rgba(0, 0, 0, 0.3);
    }
    .stacks-on .tab-strip .tab .tab-group-indicator {
         background:  rgba(0, 0, 0, 0.3) !important;
         background-color: rgba(0, 0, 0, 0.3);
    }
    #header, 
    .bookmark-bar .observer .folder,
    .bookmark-bar .observer button {color: rgb(255, 255, 255);}
    .color-behind-tabs-off .bookmark-bar button.chevron,
    .color-behind-tabs-on .bookmark-bar button.chevron,
    .bookmark-bar button.chevron,
    .toolbar-addressbar .toolbar,
    .button-toolbar.toggle-extensions-group  {fill: rgb(255, 255, 255);}
    .tab.active, #switch, #footer, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .startpage .manager > div {
       background:  var(--colorBgAlpha) !important;
       background-color:  var(--colorBgAlpha) !important;
    }
    .tab-position > .tab.active > .tab-header  {
     color: var(--colorFg);
    }
    .tab-position .tab {height: inherit;}
    .private-intro {
      background: var(--colorBgAlphaHeavy);
    }
    

    0_1544215720947_testa.PNG



  • There is a property in css that might be useful backdrop-filter: blur(10px) , this can be applied to images behind the transparent elements.

    Most browsers now support this by default but Chrome browsers require you to enable this chrome://flags/#enable-experimental-web-platform-features


  • Moderator

    @sjudenim This works quite well when there's text on top.



  • 0_1544375174939_2018_12_09_18_04_18_Greenshot.png

    Doesn't seem to work here unfortunately πŸ˜•


  • Moderator

    @GoldNoway Ah, that's unfortunate. It looks as though it's failed to load the image resource, so you are left with the default background.



  • @LonM I think I understood why it didn't work, it's probably my mistake. Thanks πŸ™‚

    Edit - Unfortunately, no, that doesn't work for me ):



  • @Ornorm nothing...



  • Does anybody know what to do with start page tiling? Inactive start page is always gray. The code that I added is .mosaic to selector of transparent elements (so at least the active one is transparent now).
    Problem with tiling transparent start pages



  • I created a JS part (to use the image you set as SD background), but it changes the image only when you open new window.
    If there's something that you would write better, tell me. (My JS knowledge is very low.)
    Here's the code:

    setTimeout(function wait() {
        var browser = document.querySelector('#browser');
        if(browser) {
            chrome.storage.local.get({
                'STARTPAGE_SHOW_IMAGE': false,
                'STARTPAGE_BG_COLOR': '',
                'STARTPAGE_BG_COLOR_USER_DEFINED': '',
                'STARTPAGE_IMAGE': '',
                'STARTPAGE_IMAGE_USER_DEFINED': '',
                'STARTPAGE_IMAGE_REPEAT': false,
                'STARTPAGE_IMAGE_STRETCH': true
            }, function(data) {
                var bg = '';
                if(data.STARTPAGE_SHOW_IMAGE)
                    bg = data.STARTPAGE_IMAGE === 'user_defined' ? 'url(\'' + data.STARTPAGE_IMAGE_USER_DEFINED + '\')' : 'url(\'' + data.STARTPAGE_IMAGE + '\')';
                else
                    bg = data.STARTPAGE_BG_COLOR === 'user_defined' ? data.STARTPAGE_BG_COLOR_USER_DEFINED : data.STARTPAGE_BG_COLOR;
                browser.style.background = bg;
                if(data.STARTPAGE_IMAGE_REPEAT)
                    browser.style.backgroundRepeat = 'repeat';
                else
                    browser.style.backgroundRepeat = 'no-repeat';
                if(data.STARTPAGE_IMAGE_STRETCH)
                    browser.style.backgroundSize = 'cover';
                else
                    browser.style.backgroundSize = 'auto';
            });
        }
        else setTimeout(wait, 200);
    }, 200);
    

    Note: You have to disable first few lines in CSS mod

    (I mean these:)

    #browser.theme-light {
        background: url("../resources/bg.jpg");
        background-size: cover;
    }
    
    #browser.theme-dark {
        background: url("../resources/bg_alt_7.jpg");
        background-size: cover;
    }
    


  • I updated the mod so now you can use also custom color.


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.