Published in CSS on Wednesday, May 5th, 2004
Recycle background images used with CSS to speed up your site and keep a consistent look and feel.
Personally, I'm a huge fan of some of the beautiful work being done on websites that are styled with CSS. One look at the vault and you'll find many examples of great work.
One of the shortfalls I'm seeing more and more is designers who rely a little too heavily on background images to pretty up their sites, often resulting in slower download times from either too many images or large-ish image files.
Now, I'm not saying that background images shouldn't be used, but asking "if we're going to use them, can background images be used more effectively?".
Well, for those who have been blog hopping lately, the idea covered in this post will come as no surprise. People are talking about similar ideas and using them.
It's quite simple and an extension from the ideas presented above - if you have background images, can you reuse them to fancy up other parts of your site?
Have a look at this webpage, at the top right hand side where the 'container' stops and the background starts. Here is that background image. Now have a look at the following blockquote:
Does the background here look familiar to you?
It should. It's the same image, reused and repositioned. Here's an example of the css; notice the negative positions on the image:
blockquote {
background:url(/i/nsite/back.png) -1021px -90px;
border:1px solid #C4C4C4;
padding-left:15px;
}
One of the objectives of the fiftyfoureleven redesign was to try and make the site download quickly and have a consistent look and feel. Using this method does just that.
By reusing an image that is already downloaded, that's one less http request, not too mention not having to download another image!
So go ahead and make your fancy background image, but keep in mind that you may be able to put it to more uses than you originally thought!
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Hey, that is a good idea. I have never thought about it how you explained it, though I personally don't overuse images in my designs. I have a philosophy. If it can be created using only css, don't use an image. That is just my 2 cents on the issue.
Nice site btw
Excellent idea! We should all be more conscious of such design techniques when putting a site together. CSS is providing new benefits everyday. I know it's revitalized the way a lot of people feel about web design, and I see a bright future for us all. By the way, I like your site's visual design very much. I can see you put a lot of work into it!
Thanks Tom and Bryan for the kind words.
Truth be told, the idea came about after the original bg image was just too big. Laziness ensued, but in the end it turns out that it's not a bad stragtegy, reusing images.
great trick idea ;)
thanks!
Good technique, never thought of it that way. I do see a lot of layouts using backgrounds now and if you can make a page quicker by re-usuing images the better. I recently redesigned my site and use backgrounds a little like you described. Although I think I can implement more of what you outlined and make their uses better.
Good point there Mike, good point :)
*me thinks what to do on his owns site*
This is a really nice technique to use for buttons if your design requires a rollover state.
For DOM browsers you simply have a hover state defined in the CSS which changes the position of the background image.
I've used this on a few sites recently and it's great when building templates for others to use as there is no need for any JavaScript.
You can also use it for active states.
If you couple it with adding a span with display none within the anchor tag you also get a nice search engine friendly button
I've detailed the technique here: www.petemorton.co.uk/cssrollover.htm
Hey Pete, be sure and check out the links up there in the 'Reuse and Recycle' section. The method that you outline is known as 'Pixy's Fast Rollovers'.
You'll notice that you do need to 'hack' to remove the IE flicker.
Nice and Clean Trick, saves a lot of banwidth too, I am planning to use it on my website too
Very nice trick. I have never thought it could be done in that way :-)
Thanks!