Styling Web Page Headers with Transparent Background Images

As I stated in the prior section, building attractive web page headers using a unique transparent background image is actually a straightforward process, since the whole development procedure is practically identical to the one that you learned for creating both angled and rounded corners.

As you might have guessed, the only difference rests in designing a different background graphic, which will be properly provided to one or more elements of a web document via the declaration of a few basic CSS styles.

But, in fact I’m getting ahead of myself. So first I’m going to create the  background image (in this case, resized for the sake of clarity), which looks like this:

As shown above, the upper area of the previous image has a solid white color, while the rest of it is completely transparent. As you can see, this basic methodology for creating background images is indeed the real workhorse that allows us to build different corner and header effects with extreme ease. Quite simple, isn’t it?

Besides, based upon the creation of the prior background picture, the visual appearance of a heading element included into a sample web page would look like this:

See how simple it was to build an attractive web page header utilizing only one transparent background image? I bet you do! Nonetheless, this graphical example is still incomplete, since you might want to see how the pertinent background image can be used within the structure of an entire web document.

Thus, based on this crucial requirement, in the next section I’ll set up a complete practical example that hopefully will demonstrate how to use the previous background picture to style some heading sections for a primitive web page.

As I said before, this will be done in the next few lines, so click on the link shown below and keep reading.