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: 
The main difference is that in the `img` tag the image is *hardcoded*.

With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check <http://www.csszengarden.com/>, all the pages use the same HTML source, but with different CSS layout.

As @Shmiddty noted, if `img` is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.

Also, the question you referred to, has nice list of all the use-cases: `When to use CSS background-image`.
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.