Creating Seamless Background Patterns For The Web

Key Takeaways

• Creating custom background patterns for web design requires a balance between small file size for quick loading and large dimensions for seamless repetition across the layout.
• Photoshop can be used to create a pattern using a variety of shapes; the key is to ensure the image itself is a square for seamless vertical and horizontal repetition.
• The file format chosen for saving the pattern depends on the desired end result: a .jpg file is suitable for simple patterns without the need for transparency, while .gif or .png files are suitable for patterns where the background color may need to be changed easily with CSS.
• The pattern created can be implemented with CSS to style the background color and set it to repeat along the X and Y axes, or to create a repeating border or stripe pattern.

Patterned backgrounds have become very popular in modern web design. With increased browser support, more and more designers are integrating tiled textures and repeating patterns into their layouts. You can find many different background patterns on the web, but you can also create your own using Photoshop. File size is a critical consideration when creating a custom background image. You’ll want your background image file to be fairly small so that it loads quickly. There are several different files formats that you can use, but they all end up having fairly similar file sizes. The best background patterns strike a careful balance between being small enough (in terms of file size) to load quickly and large enough (in terms of dimensions) to repeat endlessly across the layout without any seams of glitches. Step 1: Set Up Your Document Open Photoshop and create a new document. In an effort to keep our file size small, I created a 20px by 20px square canvas. The square shape of the canvas is extremely important, because we are going to rely on symmetry in order to create seamless vertical and horizontal repetition with a single image. You can design the pattern using a variety of shapes, but make sure that the image itself is a square. Step 2: Show Your Rulers Hit command or ctrl + “R” to show your rulers if they are not already visible. Showing your rulers will enable you to apply guides in the next step. Step 3: Use Guides to Help Make Things Even Click and drag from both the vertical and horizontal rulers to the center to apply guides to your document. The intersection of the two guides should identify your center point. Step 4: Choose the Tool to Make Your Pattern You can create your own shapes using the marquee tool, the pen tool, or the custom shape tool. I chose the custom shape tool, where you can select from regular shapes such as rectangles, ellipses, or polygons, or you can use custom shapes from the option in the top toolbar. Step 5: Choose Your Shape Set I chose the custom shape tool, and I clicked the custom shape icon with the drop-down arrow. This menu should have a default list of shapes, but if you used one in a previous project, it may show up in the pop-up box among the default choices. Step 6: Choose Your Shape Click the fly-out menu and choose ornaments. I chose the five diamonds that form a cross. Step 7: Drawing Your Shape Click and drag your shape onto your canvas, making sure to release it in the exact center. The idea here is to create a symmetrical design with even spacing on all four borders. Step 8: Coloring Your Pattern If you chose the shape tool, you can click the slider icon on the shape layer and change your graphic’s color easily. If you chose instead to draw the shape yourself with the pen tool, then you will have to color it by using the paths panel and clicking the icon at the bottom called “Fill path with Foreground color.” Step 9: Selecting the Right Background For Your Pattern If you are making a transparent pattern, make sure to delete the background layer, or click the eye icon to hide the background layer. If you are going to use an opaque .jpg file to form your pattern, make sure to add your desired color to the background. Step 10: Save Your Pattern Choose File> Save For Web & Devices. Step 11: Choose the File Format That Works For You Depending on what your preferences are, you can save in three different file formats. You could save it as a flat, low-resolution .jpg file. This won’t allow you to have transparency, so you will have to choose the desired background color and apply it behind the pattern before you save the image file. Otherwise, you will end up with white as your pattern’s background. The .jpg file will have a very small file size, which makes for quick page loads. You could also save the image as a .gif file. With a .gif, you gain the ability to have a transparent background, but if your pattern is complex, you may experience a loss in image quality. You might see rough edges or slight pixelation. Saving your background as a .gif file will also give you a small file size, and it’s a viable option when you aren’t creating complex patterns with different colors. Often, the best choice is to save the file as a .png file, which supports transparency just as the .gif does, but looks sharper and more crisp with complex patterns, colors and color gradations. Choosing your file type all depends on your desired end result. If you have no need for transparency, and you just want a simple pattern, then a .jpg file will work just fine. If you want to be able to change your background color quickly and easily with CSS, then choose .gif or .png. In this example, I saved the file as a transparent .png; I wanted a sharp repeating pattern with the ability to change background colors using CSS. Step 12: Implementing Your Pattern With CSS With CSS, I styled the background color to be #FFC (a shade of yellow), which works well with the blue we chose earlier. I brought in the pattern I created as well and set it to repeat along the X and Y axes. You do this by not specifying the X or Y axis, causing the pattern to repeat along both axes by default.

body {
background: #FFC url(images/bluedia.png) repeat;
}

The result is that the diamonds are all in line and form a grid pattern with the chosen shade of yellow as the background. Step 13: Make a Repeating Border Pattern Instead With a small change to the CSS code, your can take the graphic that you chose and make it a border or stripe instead. One thing to keep in mind is that thicker borders will require taller or wider images, depending whether the border will be horizontal or vertical. Step 14: Make a Horizontal Pattern Change the repetition of your pattern graphic from “repeat” to “repeat-x.” You can specify top, center or bottom to indicate where it will repeat. Note: to make a bottom border, change “top” to “bottom” in the code below.

body {
background: #FFC url(images/bluedia.png) repeat-x top;

Step 15: Make a Horizontal Stripe Pattern If you change “top” to “center,” the result is a horizontal stripe across the center of your layout.

body {
background: #FFC url(images/bluedia.png) repeat-x center;
}

Step 16: Make a Vertical Pattern For “repeat-y,” you can specify left, center, or right, and you will get different results. Step 17: Make a Vertical Border Pattern Note: to make a right border, change “left” to “right” in the code below.

body {
background: #FFC url(images/bluedia.png) repeat-y left;
}

Step 18: Make a Vertical Stripe Pattern Changing “left” to “center” will result in a vertical stripe in the middle of your layout.

body {
background: #FFC url(images/bluedia.png) repeat-y center;

Conclusion

You could create a pattern out of any shape in Photoshop. You can use diagonal lines, circles, a simple noise texture, stripes, ornaments, or literally anything else that you can create inside of Photoshop. Efficient use of tiled and textured patterns can enhance your design aesthetically without hindering your site speed or affecting functional aspects of your website.

Frequently Asked Questions on Creating Seamless Background Patterns for the Web