Posts
Wednesday, May 20, 2009
I just saw the background image of YouTube and was amazed to discover that it has all the commonly used graphics on a single image. I don't know how many people have actually noticed that or used this technique, but it looks brilliant to me. Its superb to fit in so much in a png image which is less than 10KB and then using CSS to display the appropriate parts of the image for each div block.
It is common to use such images for hover buttons, where you just change the position of the image for hover effects. This ensures that you don't have to wait for the hover image to be loaded to see the effect. But, I never ever thought of encompassing all my graphic objects in a single image file and then displace the image as required using the background-position property in CSS. It would definitely make the page load much faster than having to download a plethora of small images which are scattered all around.
The YouTube background includes the header logo, the favorite rating stars, the button backgrounds, small buttons, gradients etc. Most of the images in this common background are used in all pages of the website and thus, its a good choice to group them all together as a single image and reduce the overall page load time.
If you want to view the background image, right click on a static background area (the gray header near the search box is a good choice) and select (in Firefox) view background image or (in IE) save background image. I'm sure, you would be surprised to see the huge png image. Alternatively, you might just want to visit this link to view the image.
5 comments:
How do I use a merged imaged to display just parts of the image?
You need to modify the CSS of the div block for which you would use the background image. You would need to set the following attributes according to your image:
background-position
height
The background-position will specify the position of the background image for that element. The height will specify the height for the element and thus the background.
Hope that helps!
I'm trying to create a youtube background with a header over the youtube boxes like ESPN has at http://www.youtube/user/ESPN.
Do you know how to do it?
Thanks,
[email protected]
I haven't worked with YouTube themes. But, I suppose, that YouTube has specially created that extended background for ESPN. I guess, they make some customizations for paid users.
Sorry to dig this post out of the grave (of other great posts), anyways, to answer Gurpeet, yes, Google/YouTube Does extend Backgrounds for (premium) users, not necessarily paid. Actually, the default layouts of YouTube are too plain, and may be wayy too boring.
There are actually services/websites out there that offer free YouTube layouts or backgrounds.
Post a Comment