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 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/)).
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.