background images in html/css stephanie beckstrom
TRANSCRIPT
![Page 1: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/1.jpg)
Background Images in HTML/CSSSTEPHANIE BECKSTROM
![Page 2: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/2.jpg)
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 <style> tags, or in your CSS file. This tutorial will cover both…
![Page 3: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/3.jpg)
Adding Background Images with CSS
![Page 4: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/4.jpg)
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”
![Page 5: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/5.jpg)
First, we will connect to HTML file to the CSS file. This line of code is shown in line 6.
![Page 6: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/6.jpg)
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”);
![Page 7: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/7.jpg)
There are multiple ways to format the background image. The way the background image is formatted right now, it looks like this:
![Page 8: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/8.jpg)
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.
![Page 9: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/9.jpg)
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)
![Page 10: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/10.jpg)
Adding Background Images with <style>
![Page 11: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/11.jpg)
Adding background images using the <style> tags is easy, and almost exactly the same as using css!
• The <style> tags are placed inside of the <head> tags
• Notice that the information inside of the <style> tags is exactly the same as it was in CSS. The only difference is that it is in the HTML file, and placed in <style> tags.
• And that’s it!
![Page 12: Background Images in HTML/CSS STEPHANIE BECKSTROM](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649dc75503460f94abb968/html5/thumbnails/12.jpg)
More information about adding backgrounds into websites can be found at:
http://www.w3schools.com/css/css_background.asp