Manipulating Background Images with CSS
(Page 1 of 4 )
Cascading style sheets let you manipulate the images on your web site in such a way that they can dramatically change its whole look. Keep reading to learn how the technique of tiling can help you make your web site look more interesting.
A
downloadable zip file for this article is available here.
Introduction
If you're a web designer who's making the first steps into this fascinating terrain, perhaps you already started applying some of the most popular concepts present in the creation of modern web sites. More than likely you've already built table-less page layouts, created compact, high-maintainable CSS styles, and coded unobtrusive JavaScript routines.
Yes, definitely it must be admitted that learning these three pillars of top-notch web development help in the construction of truly professional web sites, even when this process, as everything in life, takes time to master. Of course, one of the best things surrounding the development of high-quality web sites is learning to implement those simple yet effective techniques that can turn an arid, text-based web page into a completely different, eye-catching landscape.
While on the web of today, content is the king that rules almost every tiny aspect of a web site, it's worth mentioning that delivering this content to end users in an attractive fashion can be by far much more effective than simply offering them endless paragraphs of boring text across different pages. And indeed, this simple proven concept can be easily implemented in the real world by adding some appealing CSS styles to the different elements that compose a web site.
However, there's one specific feature included with the CSS specification that sometimes can be underestimated by some web designers, particularly by those with limited experience in this field. In this case, I'm speaking of using background images to transform the look and feel of a specific web document.
But, what's the point in mentioning this? After all, in the old days of the web, it was also possible to include background images on a web page, simply to make it visually appealing to potential users. Well, while this is true and doesn't bear much discussion here, you'll surely know that when you work with CSS styles, they allow you to specify easily whether a concrete background picture has to be repeated vertically, horizontally or both, within a specific web document element.
This known functionality offered by the CSS specification, when used in a clever way, can dramatically change the visual presentation of a web page by only using a few lightweight background images, which can be quickly downloaded by the browser.
Therefore, taking into account that this CSS-based technique might be interesting to rather inexperienced web designers, in the two tutorials of this series, I'll be demonstrating how to use the pair of popular "repeat-x" and "repeat-y" CSS properties to improve the overall appearance of a sample web site via some simple background pictures. You can use the basic example I'll be presenting to fire up your own sparkle of inspiration.
So, are you ready to learn how to use the functionality provided by CSS-based background pictures to spice up your existing and future web sites? Okay, let's begin now!
Next: Creating a basic web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
