Add a Wallpaper Background Image

Purpose

Current trends for the body’s background vary from one solid color to large photographs with many options in between. A common option is to introduce a simple and subtle texture, called a seamless background or wallpaper. By default, the background property repeats, creating a wallpaper with a single graphic file. The resulting pattern can overpower the important elements of the overall page design. The background’s image should not obstruct the text or complete too heavily with other images on the page, so that visitors will know where to start reading or interacting.

Learning to adjust the original graphic file to enhance the site without overpowering it takes practice. In addition, this background graphic should not take any time to load, so the file size must remain low. Choosing the best file format for the job will depend on the number of colors in and size of the image. If the image has a lot of variations of color, then a JPG file might be best. If the file uses just a few flat colors, then PNG and GIF are good choices. PNG files will allow variations of background-color to show through if transparency is used.

Examples of seamless background wallpaper graphics

• 
  
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Optimize

In this lesson you will create a small, subtle graphic, save it in the appropriate file format, and repeat it in the background of the body tag.

1. Start with what you created already.

This technique uses your existing background photo.

1. Open the original photo file or your finished banner background file.
2. Remove any layers that do not relate to the wallpaper you want to make.
3. Save the file as a new document called wallpaper.
4. Choose an interesting part of the photo by selecting it with the Crop tool. Enter
5. Use the Magic Wand to select the negative space around the foreground item. Delete.
6. Add other items or duplicates of your original shapes to finish the middle of the design. Stay away from the edges.
7. File→Save the file as .PXD (or .PSD) so you can edit again later.
8. Turn off the white background layer if there is one.
9. File→Save as .PNG for the web site. (Photoshop: use the File→Save for the Web menu)
   • Reduce size as needed.
   • Choose .png for true transparancy and a file size lower than 30k.
     • Watch the file size; it may be too big to meet your requirements. If so, use TinyPNG to reduce its size. If it is still too big, then redude the complexity and dimensions of the imagery.
10. Remember, that all background patterns need to be subtle, not loud.

Variation

To create different spacing for the repetition, use 3D Dojo‘s Photoshop technique.

1. Create a new document with square dimensions in RGB color mode and 72 pixels per inch (ppi) with a white background.
2. Add shapes to your layout but do not allow them to touch the edge of the canvas.
3. Select all layers but the background color (white).
   • Duplicate the group.
   • While the group is selected, choose Filter→Other→Offset from the menu.
     • Slide the horizontal and vertical offsets to meet your needs (I chose the median of my canvas width).
     • Click Wrap Around from the check box list.
     • Click OK.
4. Add other items or duplicates of your original shapes to finish the middle of the design. Stay away from the edges.
5. File→Save the file as .psd so you can edit again later.
6. Turn off the white background layer.
7. File→Save as .PNG for the web site. (Photoshop: use the File→Save for the Web menu)
   • Reduce size as needed.
   • Choose .png for true transparancy and a file size lower than 30k.
     • Watch the file size; it may be too big to meet your requirements. If so, use TinyPNG to reduce its size. If it is still too big, then redude the complexity and dimensions of the imagery.

2. Save and improve the file size

Once you have the file on your hard drive, look at the file size. If it is larger than 30k, then use TinyPNG to reduce it. Compare the resulting file size to confirm it is small enough. If not, then go back to your working file and either change the image size, reduce colors, reduce shadows, and reduce other embellishments, if any.

Upload the optimized file to the /img/ directory.

Style

3. Add the image to the stylesheet.

Call the image from the style sheet in the @media query’s body {} block: (There is no need to provide a decorative background image for smaller screens.)

Feel free to use the short cut version of the background tag.

Note that repeat"> does not belong in the styles above; remove it; the web application has a glitch in the code.

The ../ in front of /img/ helps the style sheet find the image file inside the images folder which is outside the /css/ folder.

4. Adjust the forground blocks to improve readability.

The wallpaper file is not appropriate for the background of blocks that will contain a lot of text. We want to read your content with ease. If you don’t have color (or enough opacity) in the <nav> and <section> blocks to allow text to be read on top of the new wallpaper file, add some to these elements in the Authoring area:

Function

5. Extra Credit

1. Use the Randomize background images.
2. Create a background pattern with CSS background-blend mode. Add this background to a block other than the body (or put your wallpaper image in another block and use the blend in the body).

6. Save and upload to the server.

Test

1. View the page.

Shift- Refresh the window and look at your page.

and look for and fix missing graphics, overlapping graphics, illegible text, misaligned columns, etc. Review the markup and style declarations to see what you missed. Ask questions if you need solutions.

2. Check the files for syntax errors.

Use W3.org's Unified Validator to find and fix hidden errors in the HTML, PHP, and CSS documents of your site. Chat with the instructor if you need help.

1. HTML validation exceptions allowed:
   • The link tag to Google Fonts related to the vertical bar |.
   • Empty img tags (until Chapter 6).
   • Table tablesort attribute.
   • Iframe frameborder, allow, and gesture attributes.
   • Meta for X-UA-Compatible.
2. CSS validation exceptions allowed:
   • :required pseudo class.
   • Properties and values related to the .gradient class.
   • Clip Path properties related to .shape class.
   • Slideshow animation properties related to .slidebox classes.
   • Drop shadow properties related to .drop-shadow classes.

Resources

Other resources

These pattern making tools are not for use in this class! However, they are fun and handy and sometimes make lovely backgrounds.

1. Pattern Cooler
2. BG Maker
3. Tartan Maker
4. Stripe Mania
5. Stripe Generator
6. Color Lovours
7. BG Patterns
8. Site Origin

Some online generators require you save a screenshot of the design. Some will download it to your hard drive. And some require it be emailed to you (use caution).

Scoring

This lesson will be scored by the following criteria:

Quiz