Web Design - tile Backgrounds

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 others 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
- be very careful be you download any .zip or other type of compressed files
    
(once opened these folders could contain other files - such as a virus)

For now you can use this red tile to test with
- go ahead and right click and download it
- then go into CodeHS and upload it so you can get the link

Now change your body style in your css 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(place uploaded_image_link in here);
}

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

Once this works you can replace the red background image with something else that is more attractive for your page