12
Background Images in HTML/CSS STEPHANIE BECKSTROM
| Date post: | 24-Dec-2015 |
| Category: |
Documents |
| Upload: | diana-sanders |
| View: | 218 times |
| Download: | 0 times |
Background Images in HTML/CSSSTEPHANIE BECKSTROM
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…
Adding Background Images with CSS
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”
First, we will connect to HTML file to the CSS file. This line of code is shown in line 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”);
There are multiple ways to format the background image. The way the background image is formatted right now, it looks like this:
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.
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)
Adding Background Images with <style>
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!
More information about adding backgrounds into websites can be found at:
http://www.w3schools.com/css/css_background.asp
