Web Design 1 - HTML Lesson 12 - tile Backgrounds, Google Forms

Seamless Tile as a Background


You already know how to use color as a page background. An image can also be used but there are a few things to consider:

Trying to place a large image for the background is not a good idea
- just don't do it - it takes a lot of file space, has a long load time , and is difficult (if not impossible) to always match the screen size your customer may be viewing the site on

A busy pattern may not be the best choice
- be sure it is not overwhelming and commanding more attention than the main content of your site

Do use a small image that "tiles"
- this means it will repeat as needed to fill the screen and has edges that match up perfectly (seamless)

Where do you find these?
Here are three sites but there are other online.

Safety Tips:
- ALWAYS be careful about what sites you dowload from - if you can download just the .jpg or .png file that is ok
- do not ever download any .zip or other type of compressed files
    
(this will download all unseen programs in a file and is one way a virus can be loaded onto your computer)

 

Now change your body style so that it is calling an image for the background
- it is fine to keep the background color style (just in case the image does not load)

body {
background-color: #6D0020;
background-image:url(images/red.png);
}

Save your page and look at it - does the background show up and can you see how the image is repeating across the screen

Adding a Google Form

Google Forms are an easy way to collect information and simple to create and add to your site.


 


Assignment for HTML Lesson 12