Does anyone know the CSS to change the images on Facebook/Meta's Splash Screen?

user280109 0
Viewed 27

When any page on the facebook.com site is loaded, a splash screen is first shown. At the top of the splash screen is the (F) logo and lower down the screen is "From Meta"

I believe both images are SVGs so the CSS code would have to somehow replace the SVGs with alternative image content. Has anyone figured out the CSS code to do this on the Facebook.com site yet?

here is the code i am trying at the moment:

#splash-screen svg {background-image:url("https://somesite.com/someimage.jpg")!important }

The image in this code doesn't exist, so it won't work anyway, but it just shows the general CSS code I am trying.

It doesnt work in chrome, im guessing due to the CSP (Content Security Policy, which disallows showing images from sites not controlled by facebook)

It partially works in Firefox, as the image i put for the background image does show up, but it also shows the Facebook images too, which is undesirable, as ideally i would like to have the existing facebook svg images on the splash screen to be hidden, and only my own images to be displayed.

Does anyone know how to fix this code to get it to work, and is there anything that can be done to work around the CSP policy in Chrome?

facebook css
1 Answers

It may be useful to convert the image to a data URL using a site like this one.

.frame, .image {
 background-color: sienna;
 width: 100px;
 height: 100px;
}
.image {
 background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBpZD0ic3ZnLWF1ZGlvIj4KIDxnIGZpbGw9IndoaXRlIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiPgogIDxwYXRoIGQ9Ik0gMTIuNSwzNy41IGgxNSBsIDE1LC0xNSB2NTUgbCAtMTUsLTE1IGgtMTUgeiI+PC9wYXRoPgogIDxwYXRoIGQ9IgogICBNIDU3LjUsMzcuNSBhIDEwLDE1IDAgMCAxIDAsMjUgMTAsMTUgMCAwIDAsMCwtMjUgegogICBtIDEwLC0xMCBhIDIwLDI4IDAgMCAxIDAsNDUgMjAsMjggMCAwIDAgMCwtNDUgegogICBtIDEwLC0xMCBhIDMwLDQxIDAgMCAxIDAsNjUgMzAsNDEgMCAwIDAgMCwtNjUgegogICIgaWQ9InN2Zy1hdWRpby1vbiI+PC9wYXRoPgogPC9nPgo8L3N2Zz4=");
}
<div class="frame">
 <div class="image"></div>
</div>

Your code will be longer -- and it won't be a live image from a website, -- but it should work:

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBpZD0ic3ZnLWF1ZGlvIj4KIDxnIGZpbGw9IndoaXRlIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiPgogIDxwYXRoIGQ9Ik0gMTIuNSwzNy41IGgxNSBsIDE1LC0xNSB2NTUgbCAtMTUsLTE1IGgtMTUgeiI+PC9wYXRoPgogIDxwYXRoIGQ9IgogICBNIDU3LjUsMzcuNSBhIDEwLDE1IDAgMCAxIDAsMjUgMTAsMTUgMCAwIDAsMCwtMjUgegogICBtIDEwLC0xMCBhIDIwLDI4IDAgMCAxIDAsNDUgMjAsMjggMCAwIDAgMCwtNDUgegogICBtIDEwLC0xMCBhIDMwLDQxIDAgMCAxIDAsNjUgMzAsNDEgMCAwIDAgMCwtNjUgegogICIgaWQ9InN2Zy1hdWRpby1vbiI+PC9wYXRoPgogPC9nPgo8L3N2Zz4=") !important;
TGekko0
Related