How Does Santa do it?
Someone actually took the time to crunch the numbers.
Bored on Christmas Eve? Track Santa online and on Twitter.
Back to CSS: 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.
You will use the same file from yesterday, cssexample.html, to do the following:
Step 1:
Download these two photos (click on link, then right click on image after it loads to download to your computer):
Step 2:
Copy and paste the following code into your body section of your stylesheet- not <body> but body {
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
Step 3:
Save your file and refresh your page and hopefully you see your image!
Step 4:
Change some stuff up. Experiment with the background-position. Instead of center try left or right. Change background-repeat. Try repeat-x or repeat-y to have the image just repeat horizontally or vertically or try no-repeat to just have one image.
How about trying one large image that will fill the whole screen?
Let’s try our ocean picture. How might you change the above code to add beach.jpg? What happens when you do?
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.