Graphic display - Change the black background
-
Hello,
when I look at a graphic in Vivaldi, let's say, for example: https://forum.vivaldi.net/assets/uploads/system/og-image.jpg
...the background is black in my case. I think it would be a good idea if I could change this background color, for example to a light grey.Thanks
-
@PetroL This is even more crucial in the case of black images with a transparent background.
-
@gwen-dragon
So how can we do this with a custom CSS?
I tried but it doesn't work.
#media { background: #a1a1a1; }
-
@gwen-dragon then we just have to "hack" it until it work! LOL
body > img:only-child {outline: solid 50vmax gray;}
apply this as Page Actions CSS or Stylus, or just bypass this nonsense with Viewhance extension.
-
Hmm it still doesn't change anything. What am I doing wrong?
At vivaldi://experiments/, I ticked "Allow for using CSS modifications."
Then in Settings > Appearance under CUSTOM UI MODIFICATIONS I selected a folder, inside Icreated a file called style.css having:
body > img:only-child {background: #002594;}
-
thanks for your code - I have added the following to your code - so I can see the transparency of images
Source: https://forum.vivaldi.net/topic/29799/checkerboard-behind-transparent-image-in-url/3
body > img:only-child { outline: solid 50vmax gray; background: #f9f9f9 overflow: hidden; } #media { background-color: #ffffff; background-size: 15px 15px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 50%, transparent 50%, transparent), linear-gradient(to right, transparent 0%, transparent 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 50%, transparent 50%, transparent), linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(to bottom, #ffffff 50%, transparent 50%, transparent), linear-gradient(to right, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 50%), none; box-shadow: 0 0 5px #000; }
-
@abolog Settings > Appearance under CUSTOM UI MODIFICATIONS only allow u to tinker with the browser's GUI (addressbar/panel/tabbar/statusbar...etc.), but not the content of the website.
That's why I recommend to inject the CSS code via Page Actions or Stylus extension.
body > img:only-child {background: #002594;}
Also, your code only apply background color to the
img
so you won't see it (cuz it's covered by the img)What u need is cover everything else around the
img
, that's why I would useoutline
orbox-shadow
instead. So, it's not really a proper way to solve this problem, thus it's a "hack". LOL -
@petrol Try this CSS code for the checkerboard effect, it's much simpler & easy to customize.
background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
TIPS: alter
25%
to25px
for static box size, regardless of window size.sorce: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()#checkerboard
-
for now I use this code in extension „Stylus” ➜ https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
body > img:only-child { outline: solid 50vmax #e1e1e1; background: conic-gradient(white 0.25turn, whitesmoke 0.25turn 0.5turn, white 0.5turn 0.75turn, whitesmoke 0.75turn) top left / 15px 15px repeat; }
thanks for your input
-
This post is deleted! -
This post is deleted! -
This post is deleted!