Home arrow Style Sheets arrow Manipulating Background Images with CSS

Manipulating Background Images with CSS

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 12, 2007
  1. · Manipulating Background Images with CSS
  2. · Creating a basic web page layout
  3. · Adding a small background image
  4. · Vertically tiling a new background image

print this article

Manipulating Background Images with CSS
(Page 1 of 4 )

A downloadable zip file for this article is available here.


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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials