What are the advantages of this implementating the css background-image property? And how do one obtain the image?

What are the advantages of this implementating the css background-image
property? And how do one obtain the image?

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.