Using Background Images when Matching Web Page Columns with CSS

As I mentioned in the previous section, having already defined a fixed web page layout that displays its corresponding columns completely evened, I'm going to add a rounded corners effect to the web document in question, logically keeping its initial structure untouched.

You're probably asking yourself the following question: how can a rounded corners effect be incorporated into the existing web page layout? Well, this procedure is actually very straightforward. It consists of specifying a background image for the generic wrapper DIV that contains the respective columns of the web document.

Given that, this background image might look similar to the one shown below:

As you can see, the previous background image has been created to achieve a rounded corner effect in the left- and right-positioned columns of the previous web document. Of course, in this case the image in question can be used only with fixed layouts, and certainly not with liquid ones, but it does show in a nutshell how a fully-balanced web page can be spiced up with some basic rounded corners. Pretty simple, right?

And finally, the CSS code required to include the above background picture into the respective main wrapping DIV of the sample web page is the following:

#mainwrapper{
   clear: both;
   width: 800px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   background: #eee url(roundedbg.gif) center bottom no-repeat;
}

All right, at this stage I showed you a simple procedure for including a few rounded corners into an existing, fully-leveled web page layout. Therefore, I'm now going to show you the complete source code corresponding to the web page in question, so you can grasp more clearly how the previously defined background image fits into the overall (X)HTML structure.

As you might suppose, this code listing will be shown in the next section, thus go ahead and keep reading.