earning Task 10 | Backgrounds for the Web

1. Find three examples you like where a background image has been used on a website. Take a screenshot of each example, save the three screenshots as .jpgs 50 quality 600px wide.

 

I'm not sure what to say about why I like these in particular, but they're websites that have a background image. I don't always go to them that much anymore. 

2. Take your "tell-a-story-with-a-flatbed-scan" image and change it to make it suitable as a web page background using Method 2 (where the image receds into the background colour). Save it as a jpg 50 quality 960px wide. Publish to your blog.

Tell a story with a flatbed scan image, as a background which recedes into a background color

 

 

3. Make a background for a web page using method 4 (1920px wide jpg, a few pixels tall, save as 100 quality). To test your image on a web page, download the Method4.zip folder, unzip the contents, locate and overwrite the bg.jpg file with your version then open the page in your browser.

It didn't turn out the way I wanted, it's totally distorted. But I wasn't sure how many pixels tall to make it, only to make it 1920 pixels wide. So I don't think I made it tall enough.

 
4. Make a seamless tile using Method 5. Save this as a .jpg, name it tilebg.jpg

To test your image on a web page, download this zip folder, unzip the contents, copy your tilebg.jpg over the existing one then open the method5.html page in your browser.

Take a screenshot of your browser, using Greenshot, and save as a jpg. Publish to your blog. Caption your image with what you thought about Method 5 specifically what do you need to consider if you are using a tiling background.

I think the main thing to consider when making a tile background is that all four corners connect up and make a pattern.