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`.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:

* The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
* Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains *just content* means visually impaired users reach what they're looking for much quicker.
* CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the [responsive web design](http://en.wikipedia.org/wiki/Responsive_Web_Design) movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).

However, there are times when images are content on a specific page. In those cases, you want to use an `IMG` tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at [When to use IMG vs. CSS background-image?](https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.

If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the [SASS/Compass](http://compass-style.org/) system to manage your design images as sprites (see [A List Apart:CSS Sprites](http://www.alistapart.com/articles/sprites/) and [Spriting with Compass](http://compass-style.org/help/tutorials/spriting/)).