1. Background Images in HTML/CSS STEPHANIE BECKSTROM

2. Background Images  Background Images are surprisingly, easy to add  First you will need…  A background image (high-res, large, free to use images are preferable)  Make sure that this image is saved to FileZilla, or any other resource manager (client) for your website!  You can either add a background image in tags, or in your CSS file. This tutorial will cover both…

3. Adding Background Images with CSS

4. Here are screenshots of the HTML and CSS files that we will be using. HTML file is called “html.html.” CSS File is called “css.css” The background image is called “ upfeathers.png”

5. First, we will connect to HTML file to the CSS file. This line of code is shown in line 6.

6. Then we add the background image to the CSS file. This takes place in the html tag (lines 4-8) Line 5 in the example adds the background image with the code: background-image: url (“IMAGENAME.FILETYPE”); If the background image is located in another folder, the code looks like this: background-image: url (“ FOLDERNAME/IMAGENAME.FILETYPE ”);

7. There are multiple ways to format the background image. The way the background image is formatted right now, it looks like this:

8. You can change how big the image will appear, where the image will appear, if it should repeat or not, etc. We will change the file so that the image will appear at it’s original filesize, and will repeat.

9. Now our website looks like this! All done! Notice how the image perfectly repeats. This is because I chose an image that would repeat well. Other images will not be able to do this (for example, photographs)

10. Adding Background Images with

11. Adding background images using the tags is easy, and almost exactly the same as using css! The tags are placed inside of the tags Notice that the information inside of the tags is exactly the same as it was in CSS. The only difference is that it is in the HTML file, and placed in tags. And that’s it!

12. More information about adding backgrounds into websites can be found at: http://www.w3schools.com/css/css_background.asp