Re: Resizable background Image Problems

[Chris Coyier]

I think one of the most important things when it comes to (X)HTML/CSS etc is really nailing the fundamentals. Most of my work has been running prewritten PHP/SQL scripts for years, so I’ve been seriously lazy on the self development side, but decided I didn’t want my new all singing all dancing site to be another WordPress clone, and am therefore writing the frontend from scratch.

So I’ve gone into my project knowing what’s possible in what languages (to a degree anyway!) and the bits ofs knowledge buried deep down that just need to be refreshed by reading as many tutorials as possible. I really would suggest grabbing a book you get on with rather than just relying on tutorials, as a good book will take you through each stage in a logical order as opposed to just being a "Here’s something cool I thought of today!". Nothing wrong with those tuts at all, in fact they’re fantastic and keep you on the cutting edge, but you need to have the solid foundation down first.

I read a bunch of sample chapters of different books until I could find one I felt I gelled with the most. In the end the one I gave most of my attention to the one written by the guys at http://www.htmldog.com , it might not be for you but it’s worth looking over their site. Most of these books will hammer home about the right way to write code. You’ll have far less problems when you know exactly what part of your code is incorrect. Properly laying out, using standard filenaming convention, semantic naming schemes, completely stripping your markup of layout.. it all goes a long way, especially when you have problems and need to debug your code. As said earlier, you’re far better off stripping the capitals and spaces out of your filenames, because it’s far easier to remember "Is it BG-Image or Bg-Image" when you know due to your naming scheme it MUST be "bgimage".

Anyway! On to the background issue, I take it you want the image to fill the background from corner to corner, even when you resize the window frame? The problem with doing that is the user is easily able to bend the image out of shape so it distorts. Is this the kind of effect you’re looking for? Or am I misreading you?