How to place custom background on tab bar?

  • I'm trying to place an image on tab bar.
    This code works, but obviously is shown in tabs too.
    Wondering how to exclude showing the background when there is a tab there - activated or not.

    .tab-strip  { /*or should be used #tabs-container?*/
        background-image: url(/hooks/vlogover.png);
        background-size: 100%; 

  • I used code for this once, right in the beginning, can't find it thought atm. But yeah, try tabs-container, tab strip can't be right.

  • Works with container
    0_1498408343148_Screenshot 2017-06-25 18.31.42.png

  • @luetage Switched to #tabs-container.
    Actually, #tabs-container, .tab-strip or both #tabs-container .tab-strip produce the same.

    Well, I've to do some code cleanup 😃

  • .tab-header {
    #tabs-container {
        background-image: url(/hooks/vlogover.png);
        background-size: 100%; 

    Ok, this worked after changing theme once (ah, the silly things I never try)

    Only have to reduce the gap between tabs (it's 1/2px) as the background is seen between them.

  • edit: ninjad 😕
    Instead I say this: Try it with a transparent pattern, I used to do this and it looks quite nice if you get the right combination together.

  • @luetage Thanks 🙂
    Feel free to link me some reference to tweak background image - probably the only I know is no-repeat xD
    Vivaldi UI will make me buy a css manual one day XD
    Of course, transparent tabs should be off in themes or... you'll see the background 😛

  • @Hadden89

    This is a good resource for css in general.

  • @luetage I'm looking also here; for a css noob it explains a lot of each command style ^^

    Ehm, what is and how to a transparent pattern?

    Other little experiment-variant on code above with simple svg texture - I like using them as are small in size and are rendered fast - for tab bar but following themes.

    .acc-light #tabs-container,
    .theme-light.color-behind-tabs-off #tabs-container {
        background-image: url(/hooks/graph-light.svg);
        background-size: 150%; /* as the squares in pattern were too small */
    .acc-dark #tabs-container,
    .theme-dark #tabs-container {
        background-image: url(/hooks/graph-dark.svg);
        background-size: 150%;

  • Try this:

    #tabs-container {
    	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABZCAMAAAD7LaEoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyxpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMi1jMDAxIDYzLjEzOTQzOSwgMjAxMC8xMC8xMi0wODo0NTozMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIEVsZW1lbnRzIDExLjAgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNDg1MjZGNTI4MzExRTc4MTJDODIyQjMwRDlGN0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVFNDg1MjcwNTI4MzExRTc4MTJDODIyQjMwRDlGN0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUU0ODUyNkQ1MjgzMTFFNzgxMkM4MjJCMzBEOUY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUU0ODUyNkU1MjgzMTFFNzgxMkM4MjJCMzBEOUY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7B0MKMAAAABlBMVEWrq6r////zIykWAAAAAnRSTlP/AOW3MEoAAAMcSURBVHja3FnbkqswDJP+/6fP7AWIbfkSCvtwmNnZVlUChUSyVfDrAPD1Bx7H9+sFQGDQMU6KAY4hWN5f03ggEHqGnRTXhV6YPTyDmtFOcdLoX1xAmCD7JBDA5eq4XugvwAPgCqBinOfTQ36Rn+EWYMWgHKLmWLjn4vFAAOtPHYOBhgyw38pctBpCC5jHs4yxgGfQAGjnME/t/LcsBTYAFsCvZbsW3CqlXJU5oNavnkPuuVVhsk23XvqhKl5S0CvIAOBwSP7tly1Va8sAQHKzHgbMDWB9PXTr1yBknCSc8vaz2QDobx7NjlC3t2IwYzRrng3ACGhHIK0KYBNABWQS5gG2DCgtJaPkdgq9DXhnuRB4r4ChjQBKwI1JAbaMcF5aIKkjlEWs+7kwET+ErjwiHgIQAKHdLAWKUt5LE/mpOqNQ5XLfMyRQmdYLwNunCcV7DeAegO55snV4aWtVRzBcnXsMXfx0ADXAhLHuV6ZCcahs3iJMVa+QvXGLoOdgkM5U1Snr7nKIAAaWlNgaWp9ztmYeiXLcpgFAOgdtRUkj7/70HmDsTjtGtcrpZbwuj/oCKqvm2W3+AeBK8ieUqwCqpiWr92+U6nfaCm4Pqb8wPvFV1SHce8DNDfcroFVobGh4Juqx+uo3H3wHbwHYHj8mBUpKgkCxZsj4oVBXqZTcq91zZe+Cn01g5GK9N3LCiFlNiNwo0pwix4NqIqrMUcSTaKhxHXOkHHxA09CVg2zrwz67Ed2v9jaT8Um/WnIo49kx5/ibjgD3jhDe5x3BfkjG9ukFc3456IqRXFGQPxTvl1s6BZqsvgvvuVWqs40fUnVFnsTfkOxRNMSPs6JReM8aQGBQdwShj4N2iMiArAXoJZvD4P1DgGkVlmX11Fk95a58LLyfAneS+DvhPV7WtCq8Z5VWMU9dyrhnYs68ad87SXwPMAcSVe+zemkEvTNkLXwdzS9DqOqSpd4YhfefA49l9YPMJvWKspjvhzDYWmaWHAds3Q8Ak2hehoGBwYThvCOpbN4K7/MYlqOgVia3tYRIbauDCfX+/wrv/wkwAErXCouVGjItAAAAAElFTkSuQmCC) !important;

  • @luetage
    There are substantial differences between encode images in base64 or hooking the image files directly?

  • @Hadden89 Images in text form load faster, and you don't have to place an additional file. But if you are using VivaldiHooks already, linking to images is probably more comfortable. I'm just trying to keep everything in a single css file, that's why ^^

  • @luetage
    It has sense.
    I use some .css instead - panel, tabs, controls, speed dial, toolbar - so probably I prefer the \hooks\img way to keep the files with less lines and characters and as I can easily put "experimental" codes.
    I have a lot of ugly /* comments */ and even some working-but-no-more-used-codes there 😃

    Before I had one .css for every hook... but they were a nightmare to handle, so I merged them in sections lol

Log in to reply

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