CSS3 Backgrounds, Tiling and Positioning
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
In this article we're going to look at how to use CSS with backgrounds and we'll have a look at the new CSS3 properties, as well. When creating images to be used as background, there are several things to consider: How will the image add to your layout? Is a solid color or gradient better? And if you're looking at tiling an image, will the image tile seamlessly?
For reference, I'm going to use backgrounds and textures that I've created in Corel PHOTO-PAINT X5. PHOTO-PAINT has one of the best texture creating tools I've ever seen and I highly recommend it. PHOTO-PAINT is part of the Corel Graphics Suite. For the record, PHOTO-PAINT offers much of the control that you can get in Adobe Photoshop for only a fraction of the price. If the price is a bit too steep for your budget, I recommend Paintshop Photo Pro instead.
Below you'll see two tables. The first gives you all the CSS background properties; the second is about background properties in CSS3.
When working with a website, sooner or later you're going to need to work with color. There are three color components, sometimes refered to as rgb (red, green, blue). These are not to be confused with print colors, which are CMYK (cyan, magenta, yellow, black). On the web, you're concerned with light and the combination of rgb colors will give you more than 16 million different colors.
On the web, you'll be working with hexadecimal notation to represent color. As an example, #FFFFFF - rgb (255,255,255) is full brightness and all the letters represent white. In contrast, #000000 - rgb (0,0,0) represents black. And of course there are many other configurations that you'll probably use. To create red, the notation is #FF0000 - rgb (255,0,0) and to create a gray, the notation could be: #C0C0C0 - rgb (192,192,192). A full discussion of color is beyond the scope of this article, though here's a handy resource if you want to know more.
In this example, we're going to look at the background property with a solid color. Note that all of these examples use an HTML5 DOCTYPE. Here's the code
Simple Solid Color
Here's a Simple Background Color
which affects the entire background of the page.
And the resulting web page.
Before we go further, I want to draw your attention to a fast way of working with backgrounds using a web design program, in this case, Adobe Dreamweaver.
On the main menu, go to Modify: Page Properties (Ctrl+J).
In the dialog box, you'll notice that you have many options that allow you to configure the CSS, HTML, DOCTYPE and more. This is one fast way of controlling the backgrounds for your layouts, though for this article, we'll be staying with the code format used above.
In this section, we'll work with the background-image property. Here's the code:
And the resulting web page (note that this an example of what not to do in terms of using textures). With this texture, any text placed on top of it would be hard to read. Not only that, but the edges of the texture are all too obvious.
If you want to have control over the way the texture is placed, you can do so by making use of the background-repeat property. The resulting code would look like this: