Jump to content

Adding noise to a solid background colour in CSS

Recommended Posts

    background-image: url(data:image/png;base64,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);

I have found the above code, and it works really well.

 

But I have no idea what it is.

 

Can anyone tell me please in plain English how it works? Or just the name of the effect so I can go and research it myself?

 

If I change the mumbo jumbo of characters, does the noise pattern change? Any time I tried it does not seem to work.

 

If I simply copy and paste this code to my site, am I stealing someone else's work?

 

I do not want to use something and not understand what it is.

 

Thank you for your help!

Share this post


Link to post
Share on other sites
Posted (edited)

So that's actually an image, in png format and the characters are base64 encoded data that you would find in an image file normally.

Hence why changing them doesn't work, you'll just break the checksum or the expected format of the image data.

 

That said, it doesn't seem to be valid png data as best I can tell.

 

For example, this doesn't understand it.

https://onlinepngtools.com/convert-data-uri-to-png

 

 

Edited by Cyclone

Share this post


Link to post
Share on other sites

Probably is an online tool also to convert a file (in this case, .png) to a base64 string, which you can then put in your css. Have you tried that?

Share this post


Link to post
Share on other sites

I am a little bit speechless at the lovely replies here and more than grateful. :)

Share this post


Link to post
Share on other sites
On 17/06/2019 at 08:24, Cyclone said:

So that's actually an image, in png format and the characters are base64 encoded data that you would find in an image file normally.

Hence why changing them doesn't work, you'll just break the checksum or the expected format of the image data.

 

That said, it doesn't seem to be valid png data as best I can tell.

 

For example, this doesn't understand it.

https://onlinepngtools.com/convert-data-uri-to-png

 

 

I have learned so much from your post. Thank you,.

 

But...

 

(1) What I do not understand is, is that mumbo jumbo just describing a URL somewhere on the internet, that, at the end of the day I am using (technically stealing - and if the owner of that image decided to remove it, it would be lost from my site too) or is that mumbo jumbo actually creating such an image? If it is the former, then it is just a way of encrypting a URL... and, meh. If it is the latter... then COOL!

(2) There is a + in the middle of that mumbo jumbo, and if I double click to select all it only highlights up to the plus sign. I managed to use a tool (see below) to actually acquire a PNG but my question from (1) still confuses me.

 

Thank you again!

17 hours ago, Waldo said:

Probably is an online tool also to convert a file (in this case, .png) to a base64 string, which you can then put in your css. Have you tried that?

No because this is the first time I am learning about these things. Thanks for your reply.

16 hours ago, Hippogriff said:

Try - http://base64online.org/decode/ - take from "i" to "==" and paste in, then hit Decode from Base64 - it'll show a 50x50 image that looks like some speckles.

 

Use this to go the other way - http://base64online.org/encode/

Thank you for your replies. I have saved these links immediately. I never knew something like this existed. I quote my questions from the other replies:

3 minutes ago, silly.questions said:

(1) What I do not understand is, is that mumbo jumbo just describing a URL somewhere on the internet, that, at the end of the day I am using (technically stealing - and if the owner of that image decided to remove it, it would be lost from my site too) or is that mumbo jumbo actually creating such an image? If it is the former, then it is just a way of encrypting a URL... and, meh. If it is the latter... then COOL!

 

Share this post


Link to post
Share on other sites

1), No.  I know it says 'url'.  But it's not really.  Within the brackets are the entire response as IF it had fetched an image from a url.  That string of characters is the PNG image.  And as Hippogriff demonstrated, it will decode into a PNG image.

 

2), Don't double click, you have to select all of it, special characters and everything.

Share this post


Link to post
Share on other sites

Is this something new? Or at least how it is being used?

 

Why do people upload images if all images can be represented like this? As I type that I feel it’s a silly question!

 

By copying and pasting these characters to use in my site, am I then not stealing?

 

And which loads faster - the tiny png or this code? Why would someone choose one method above the other?

 

Thank you for your help. 

Share this post


Link to post
Share on other sites

One benefit will be page load time. Also, some developers may like not having to host a tiny .PNG file?

 

I seriously doubt anyone would be bothered about IP rights on a seemingly randomly generated noise image file.

 

Good luck!

Share this post


Link to post
Share on other sites
Posted (edited)

No, I don't think it's particularly new.

 

Well, that's a very small image, 50*50 pixels, and it's encoded directly in to the CSS so difficult to change.  In terms of IP, it makes no difference whether it's an image file or a string of characters.  You have to know whether you have the rights to use that IP, or you are risking a copyright breach, not theft.

Edited by Cyclone

Share this post


Link to post
Share on other sites
Posted (edited)

In fact, you should know if you have rights to reproduce it on Sheffield Forum. I'm guessing you may already be in breach of copyright.

 

Sorry, I'm going to have to report the post, Sheffield Forum is quite clear on piracy issues! Only joking, not really going report it.

 

But technically, I believe Cyclone is correct, even though it's a random image, the copyright will (most likely) be with the creator. Reproducing it on here, is no different technically to reproducing, say, a copyrighted movie or music file (well, not quite, there could be additional IP rights, trademarks etc).

 

Of course, it's unlikely anyone will be as bothered about enforcing their rights over a random image, as say, the MPAA would be about preventing illegal downloads of material they own the rights to.

Edited by Waldo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.