CSS3 Fundamentals #2 Background Images

Background images have a rather storied history when it comes to the World Wide Web. Just like furry wallpaper and wood paneling, there’s no accounting for taste; and almost immediately after the release of Mosaic in 1995 those cursed with just a smidgen of creativity starting cladding their works with a cursed combination of teddy bears and tiled stars. After a while, the web started looking your great aunt’s Thanksgiving sweater, for better or… No. Just worse.

Despite the historic stigma, background images can (and are) quite often used as an effective component in great web design, and is an essential part of CSS. You can use background images on a page level, or within individual page elements that you have created. The image will assume the total size of your element; or if smaller than the element itself, be tiled starting at the top-left corner.

#background-image Syntax Formatting

background-image:url(‘sample.gif’);

All that’s required to insert a background image is specifying the location of the image. Most common image formats are supported, and as always, it’s a good idea to keep your image locations relational to your HTML document.

#background-image Example

Now we’ll create a simple page utilizing a tiled background image with a sample image included in the project source. Create a new HTML5 document, and enter the following CSS definition within the header:

body {
	background-image:url('background.gif');
}

Because our image is substantially smaller than our page, it will render in-browser tiled. Keep in mind, not all images will tile in an aesthetically pleasing manner, so make sure your image is so suited. Our example as provided here is applying the style to the entire body of the document, so all other page elements and divisions will inherit this background unless otherwise specified.

Now let’s add a < div > so that we may employ another background image, and see what our page looks like with some content:

<div>
Turtles Have Short Legs, Not For Walking
<br>
Well, We Can Find It Out, We Can Find It Out
</div>

Then create a new style definition for the < div > element:

div {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	background-image:url('turtle.jpg');
	height:200px;
	width:300px;
	text-align:center;
	font-size:11px;
	border-radius:40px;
}

As you can see, when saved and opened in your browser, our < body > background is tiled, and the text content within our < div > is overlaid on its own independent background:

Background images can be a rather useful utility when trying to adapt mockups you’ve created in Photoshop, or another image editing application. Often, you’ll find that you’ll be utilizing gradients and other elements that cannot be directly emulated within CSS, and therefore must be accomplished by using background images. If, however, you find yourself adding a background as an afterthought, chances are your design really doesn’t need it, and you’re probably better off just sticking with a solid color, which we’ll be covering next time.

Download Source Files

The post CSS3 Fundamentals #2 Background Images appeared first on The Web, Made Easy! | Web Tutorials, Tips, and Articles.