Image Transparency Checkerboard



  • Hey guys,

    does anyone of you know if there is a way to change the way Vivaldi displays the transparency in images?
    For example: https://cdn.shopify.com/s/files/1/0374/6925/files/Shoesize-adult-en.svg-INVERTED_1024x1024.png?v=1480855576

    I get a checkerboard pattern where the picture is supposed to be transparent, and it's impossible to read the white text that is hidden in the transparent parts of the picture.
    Is there a way to change this behavior?

    Thanks!



  • @Laviic Copy/paste to IrfanView is a workaround, but I don't know how to change the transparency background.



  • Maybe use a bookmarklet:

    javascript:void(document.getElementsByTagName('img')[0].style.background='black')
    


  • Okay, thank you for the workarounds.

    I guess it is simply not possible at this time...

    Cheers!



  • It can be changed in Photoshop, maybe the following link helps:

    http://www.essential-photoshop-elements.com/transparency-checkerboard.html


  • Vivaldi Translator

    @Laviic
    I think that's because the default CSS set in that page code for that image was not right.

    On your https://cdn.shopify.com/s/files/1/0374/6925/files/Shoesize-adult-en.svg-INVERTED_1024x1024.png?v=1480855576, all these style"**" garbage was set.

    <img style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" src="https://cdn.shopify.com/s/files/1/0374/6925/files/Shoesize-adult-en.svg-INVERTED_1024x1024.png?v=1480855576">
    

    If we don't have them, the image transparent area become really transparent.
    Same for other sites with transparent images. At least their CSS stylesheet need to be adjusted.



  • @dLeon
    Sorry for only responding now. The topic was already kinda done for me, so I only accidentally noticed that there where more replies. Sorry for that!

    If you open an image directly, Vivaldi wraps it into a standalone display page. That is also where that style comes from, and it is precisely the behavior I would like to target and change. However, I don't know how to do that permanently... I would guess Vivaldi uses some kind of template for that standalone display page, but so far, I was unable to find it...


  • Moderator

    @Laviic When you're on that page, click RMB on that image, click on "Inspect" and in the "Styles" tab uncheck the background-image property.

    0_1490032998913_upload-56f3a7ef-4f6c-4676-8d30-8a6768463d30

    If you want a permanent solution, you have to write custom CSS for those pages, to overrule the default CSS with the checkerboard pattern. IMO too much work for something that could be done with 3 simple clicks manually (for each image). I guess it depends on how many of this type of images do you have to deal with on a daily basis...



  • @pafflick Thank you, I am aware of the 'inspect' and how to temporarily remove the style with it and stuff :slight_smile:
    However, I am not aware how to write custom CSS for it that would overwrite that style permanently. I guess I would have to kinda write my own extension or something? I don't know... But that is something I can easily read up on on the web, so don't worry.

    And it happens quite regularly for me. Not really often. But regularly. Might not be super worth it for the images alone, but certainly for the learning experience!

    Thanks again, and have a good one!


  • Moderator

    @Laviic Any extension for custom CSS should allow you to write the code for that. Whereas the code itself will be very simple and easy, the hardest part will be to assign that code to images only.

    There are extensions that work only for images, so it is possible. I'm not sure how, though. There might be a special chrome extension's permission for that. But they might also use some regular expression or perhaps there is some JavaScript method used to detect images. I haven't done too much research on that - if you insist on getting that custom CSS, you'll have to look it up. 😉


Log in to reply
 

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