What exactly does adding a width and height to an <h1> do? (I mean it looks obvious enough, but I'd like to hear how you explain it.)
By default the h1 would be width:auto which for a block element would expand horizontally to the edges of the containing block. It's height would be whatever its content made it stretch to. Therefore by setting height and width we make the h1 match the size of your image exactly and thus fit into the space that the actual image would have taken up. Any content in the H1 that is greater than the width and height will just spill out unless we hide the overflow.
And why are we adding display: block; ??
That was a very old bug (safari IIRC) where it needed display:block on absolute elements (the span) but that bug is long gone so you can remove it. (As an aside Safari still has this bug on generated content that is absolutely placed and needs display:block also).
Anyway you can remove the display:block unless you want to also add an anchor into that rule to link back to the home page etc.
The last line above is what has tripped me up this afternoon...
I realized that there is some logic I need to figure out, because my Header will have this Image Replacement thingy for the Home Page, but on every other page, my Header needs to have my old-fashioned Logo. So I need to use some PHP to programatically shuffle the right HTML in at the right time... :-/
That's a PHP question if you want to deliver separate content although I guess you could just add a class to the body tag and hide and show content as required but inserting the correct html would be the correct approach.
So that last line of your code above breaks when I reference it from a page in a different directory. See my other thread here... background: url() not working
I'm not following you there. CSS paths are always relative to the CSS file so if you include a css file the paths don't need changing in the css rules themselves because they are always related to that css file. You may have to adjust the path to the actual file itself but never the rules inside.
Why does it hide it automatically?? (I would think you'd need a z-index...)
Positioned elements always trump non positioned elements so you don't need an explicit z-index in that simple situation.
Lemme see if I follow you...
If I want all of this to be displayed...
<h1>My Company Name: How to start your Own Small-Business<span></span></h1>
...if the Logo image is missing, then I could take my 220px wide logo and add some white space to the right of it thus maybe making it 500px wide and then all of the text above would be displayed if the Logo image was missing? Is that what you meant?
Yes that's what I was saying but it depends on whether your page has the room for that scenario.
You can test the image replacement technique in Firefox by simply hiding images from the toolbar or by switching css from the toolbar or by switching both off and then you can see all the options and what it will look like (other browsers will also let you switch things off like that).
Things don't have to be perfect in the alternate scenarios but just usable. Sometimes though you can make it look good and sometimes there just isn't room on the page to display all the text that the image was hiding.
That won't be a problem, so I'm good there.
As always, THANKS, Paul!