Today we’ll do two things: style our headlines <h1>, <h2>, etc. and add a photo as a background image using CSS.
Styling Headlines with CSS
You learned about the headline tags <h1> through <h6>, where <h1> is your largest headline and <h6> is your smallest. If you don’t specify what font to use and what size font, the browser will just use default settings for your headlines.
To style your headlines (remember 1em equals 16 point font)
h1 {font-size:4em;}
h2 {font-size:3.5em;}
h3 {font-size:3em;}
h4 {font-size:2.5em;}
h5 {font-size:2em;}
h6 {font-size:1.5em;}
Make it more interesting by choosing font-weight and text-decoration
h1 {font-size:4em;
font-weight:bold;
text-decoration:underline;
}
Text-decoration is important because the underline tag <u></u> won’t be supported in HTML5 so you must use CSS to code for underlining text.
Using CSS to Add a Photo as a Background Image
If you have a photo you’d like as your background image, no matter what size, you have several options. Think of it like when you set a desktop image for your computer. You can either have one large image stretch across the entire screen or you can “tile” the image to have it repeat over and over. You can do that same thing with CSS for your website.
Step 1:
Find an image online and save it into your folder (right click on the image to save it). Make sure you give it a name that makes sense because you will need to know the name of the file!
Step 2:
Copy and paste the following code into your body section of your stylesheet- not <body> but body {
background-image:url(bruno-on-desk.gif);
background-repeat:no-repeat;
background-position:center;
Step 3:
Change bruno-on-desk.gif to the name of your file. You will need to know if your file is a gif or a jpg
Step 4:
Save your file and refresh your page and hopefully you see your image!
Step 5:
Change some stuff up. Experiment with the background-position. Instead of center try left or right. Change background-repeat. Instead of no-repeat try repeat.
Important note:
If your image was very large (over 600 pixels) it likely filled up the entire screen and it wouldn’t really make sense to repeat it. You might want a nice, large photo as your background and that is totally fine. You could also have one small image as your background.
Remember:
The image is literally in the background and is basically a part of your page. All of your content, including text, photos, videos, etc. will go OVER the image (see my example on the board). Keep this in mind if you decide to do this as you’ll want your text and content to be visible.