Today’s goals:
- Learn how to add page background image
- Learn some more ways to use Firefox’s web developer add-on
- Learn about a page wrapper/container
0. Today’s featured website:
1. Body background image
- Begin by removing the comment code around lines 22-25 (delete /* and */). What do you see now?
- Find another background image to use. Try Bing.com (do image search, then search for free to share and use under License). Make sure you download and save this image in the correct location (same as your webpage). You might have to re-size your image in pixlr.com.
- To add your background image, remove my image of the pug and add yours. It will just be the image name and not a link like mine. Example: url(‘pumpkin.jpg’);. There is no space between url and the parenthesis, those are single quotes around the image name, and there is a semi-colon at the very end.
2. Firefox web developer add-on fun
- Going back and forth between Notepad++ and the browser is SOOO tedious when all we want to do is practice and check things out!
- Open your webpage in Firefox
- Click CSS from the top menu bar, then edit CSS. An editor should appear with your CSS at the bottom of the screen
- Let’s try changing some things- change repeat to no-repeat or repeat-y or repeat-x and see what happens; change center to left and right; change some of the other values of different elements such as colors to see how your page changes.
- Also go to Miscellaneous, then edit HTML. You can do the same thing to your HTML.
- Are these edits being saved? How can you keep them if you want them?
3. Adding a page wrapper/container
- Get rid of current background image- Comment out your background image by adding /* before the word background on line 22 and */ after the semi-colon on line 22.
- Add new background image- Copy and paste the background-image line from here onto line 23 (hit enter to give yourself a new line).
- What happened?
- Let’s fix the cutting off of the new background image by putting everything into a page wrapper/container.
- First, copy and paste the #wrapper code from here right below your body { } section in your style sheet.
- What happened?
- Now, move the three lines with style details about the background image in the body { } section by cutting and pasting them into the #wrapper section below the border-width: 5px; line.
- What just happened?
- Some other border-styles to try: solid, dashed, double, groove, ridge, inset and outset.
- Let’s talk about the wrapper/container and the CSS box model