In our continuing pursuit to make web design easy for you, we have yet another great little tutorial on using CSS to insert background images into your web pages.
A little bit from the article:
CSS also gives us the tools to direct our background image how we want it. The default, as you can see, is that it repeats itself horizontally AND vertically to fill the entire background, regardless of size. Sometimes we might want the image appear only horizontally or vertically â€“ and maybe not directly on the edge of the viewing area.
Itâ€™s true: Your navigation items are really a LIST. Bread, Milk, Sugar, Coffee, Home, Contact Us, About, Cheese, Tomatoes, Sitemap. See, itâ€™s a LIST!! And it should be coded and styled like a list. Itâ€™s easy.
Just another one of our growing collection of CSS tips.
If you’ve been struggling with CSS based page layouts (as apposed to using tables) and you’ve been smacking your head against the wall to get things to work … believe me, you’re not the only one!
No, you’re not stupid … CSS for page layout is.
What?! CSS is flawed?
Indeed. CSS for page layout sucks hard because the logic behind CSS page layout is weak at best, and perhaps, even flawed. I can say this with experience in other languages like Java and even VB. Not that I am saying CSS is a programming language.
For web designers used to the craziness of CSS layouts, they would be flabbergasted at how easy creating layouts/views/screens are in VB or even Java when compared to CSS.
I can’t tell you how many times that my programming experience (in Java, PHP etc) has guided me in my web design work … and strangely, even in other aspects of my life not at all related to topics ‘nerd’.
… Ah, nerd wisdom prevails in all aspects of life.
Anyway, here yet again, is another example where programming guides me: this time, it’s all about web design and code.
Over the last few years, the consensus in the web design community has been to streamline code. In real terms, that comes down to:
… and consolidating css code into one file, to minimize the number of server hits.
… The idea is to speed up web page load times and to reduce web server loads.
This is an important goal and something all web designers should be concerned about. The problem is that if you are concentrating on optimizing your CSS or HTML to speed things up, you are concentrating on the wrong parts of your websites.
The fact is, that most of the optimization opportunities is actually found in your images, Flash movies and other multimedia content – not the code.
When I was working on the redesign of the killersites.com, I found (as a starting point) that the templates that ship with Dreamweaver CS3 useful.
Dreamweaver CS3 starter templates
Dreamweaver has a nice collection of bare-bones web templates. One thing I found cool about these templates, is that they contain a lot of notes that describe why they (the web-nerds at Adobe) have certain things in place – like the specific code they used to deal with a given CSS layout issue.
… This is another good way to learn more about CSS.