Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : How does this work

[seodevhead]

I was looking through the CSS file used on Comcast.net and found something interesting. Take a look at the header on Comcast.net, and take a look at the H1 descendant declaration in the CSS file:

#header h1 {
	position: absolute;
	top: 11px;
	left: 15px;
	width: 123px;
	height: 32px;
	background: transparent url(/images/global/explore2.gif) no-repeat 0 0;
	overflow: hidden;
}

Now they are setting a background image ( http://www.comcast.net/images/global/explore2.gif ). Take a look now at this background image they are using. How does this one large image, laid out in the way it is, put together like it is on their homepage??? It doesn't make sense how they can turn this explore2.gif image into what you see on their homepage header. Perhaps one of you guru's can explain this to me . Thanks for your help and guidance! Take care.

[WebDesignGold]

I'm not good at explaining how things are done but I can say it's about positioning of the background image. In fact that same image, or parts of it, is used in different places in the layout. Look at this part of the code and you'll understand:

repeat-x 0 -228px

Does this make sense?

[seodevhead]

I think I might understand what you are saying. So the background image was made in such a (special) way that when repeated along the x-axis, it perfectly unfolds and lines up in order to form the entire header you see on the homepage? If this is the case, why not serve up a header image that is more horizontal in nature (matching that of the box element), rather than this convoluted vertical-esque image?

[WebDesignGold]

Not exactly. I personally don't understand what's the point of using it that way when they could've used separate images/icons instead. Ususally, that technique is used in menus that use hover effects. You have both the "onmouseover" and the "onmouseout" part in one single image. That way, there'll not be a delay of loading the "on" image since it's already loaded. It's just "hiding" there and wating for the mouseover call.
Here, you'll see how it's done. Even better, this method helps against the IE flickering annoyance.