0

I am a beginner just setting out to learn basic html and css, so please bear with the question, if it is elementary.

Along with the advantage of this implementation, I have one more query.

On this site :https://www.khanacademy.org/, the banner image cannot be right click and saved. So,I tried saving the whole page locally, but among the files saved,I could not find the banner image.

And using firebug when I finally downloaded the image, I found the color of the banner image to be different from the one which I saw on the site.

Could someone shed some light on why the image file is missing when I saved the whole page and secondly, why the change in color? Is it because, in this container : #homepage-signup-callout-container (in the homepage css file), the background-color: #8E4C9B; is set as such?

But how can this effect the image as it will be on top of this background color?

PS: I don't want to use the image illegally :), I just want to know how this scenario is achieved.

Thanks.

Silk Spring
  • 1
  • 1
  • In general, you set a background color as a fall back in case the image is missing for some reason. Or, the image has transparency and you want a color behind it. – emerson.marini Sep 05 '13 at 13:35
  • the background image is provided as `base64` and so is directly stored in the HTML, not in a different file. The color is purple when you download it. – Fez Vrasta Sep 05 '13 at 13:36
  • wow..Yeah, I was wondering about that 'base 64' with all the characters following it. But why would one embed it like that in 'html'? – Silk Spring Sep 05 '13 at 13:38
  • There are a couple of reasons it might have been embedded in the HTML. To stop people like you from trying to grab it, to make sure it loads at the same time as the page, to ensure it is not blocked by web filters if the main HTML is not blocked. (I've seen some examples of filters replacing or blocking .jpg/.png etc and loading the HTML, which never looks right, and can wreck the usability. I expect that the most likely reason is the load time, ensuring that the background always loads with the page. ...could be a function of their CMS though too. – Rod MacPherson Sep 05 '13 at 13:44
  • haha...'To stop people like me from trying to grab it' That's good. Thanks for the detailed info. Much appreciated. – Silk Spring Sep 05 '13 at 13:51
  • @Fez Vrasta Yes, the color was purple but it was a different shade of purple. – Silk Spring Sep 05 '13 at 13:53
  • @SilkSpring in that way they save the time of another http request, because the image is passed together the HTML page. – Fez Vrasta Sep 05 '13 at 14:07
  • Thank you all for the wonderful answers! I will dig up more, now that I have a lead. – Silk Spring Sep 05 '13 at 14:09

1 Answers1

0

If you look at the url of the background image in firebug, you'll see that it starts with: 

data:image/png;base64,

If you try to open the link in a browser window, you'll also see that the URL is incredibly long, whats actually happening here is that the image data, probably the same data that you would see in the file if you saved it and opened it in notepad is stored in the url(); css property as base64 encoded data

See the Data URI Scema here : http://www.ietf.org/rfc/rfc2397.txt

See this Wikipedia article : http://en.wikipedia.org/wiki/Data_URI_scheme

also see this question : Why use data URI scheme?

Community
  • 1
  • 1
Matt.C
  • 1,327
  • 7
  • 20