Question: I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice. 

I look at the techniques used, and see that:

* you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
* you need to make the foreground element to somehow disappear with css tricks. 
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer

(I did go through this [When to use IMG vs. CSS background-image?](https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) , and could not figure out a clear answer)

Answer: 
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.

As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
One of the main points of *image replacement* is to use your site title in a `h1` tag for good SEO, and then hiding the text and replacing it with a custom logo.

This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.