The method I linked to shows how to place the original text underneath the image, not on top.
So, with CSS you can hide the text by setting a rule like text-align: -9000px;. That way, your tagline is still available for the search engines since it's text (even though it's hidden and not just a graphic. The alt tag, which should always be included with a good description of the image, will be read by the screen readers and the alt attribute provides the alternative text that displays if the image doesn't load.
Unfortunately, not all browsers display the alt text like that—such as Webkit browsers. So if images are off, it's still likely that there will be nothing there at all. That's why the method of placing the image over the text is the best method available currently.
Do you create a stylesheet for mobile devices? You could eliminate images altogether to reduce the bandwidth for mobile devices.
At the moment, I tend to add a few extra media queries to the main style sheet, but it may be better to use a separate one. Haven't made up my mind on that one yet. Unfortunately, mobiles sometimes download images anyway, even if you don't serve them up. Not sure where the line is drawn. Certainly if you, say, have a background image in a stylesheet and then set it to no background image via media queries, the image still downloads. Perhaps that's not the case with a separate style sheet, but I'm not sure.