My Community

Tutorial 5 Adding A Background Image To A Webpage

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 5 Adding A Background Image To A Webpage
« on: September 22, 2014, 06:45:44 PM »
Today I will add a background image to a webpage.  When this shows up you will see the background image instead of a background color when coding a webpage.  Lots of websites are using background images in CSS for posting advertisements on the web now.  The internet has come a long way since coding first started.

All you need to do to create a background image for a webpage is to code 8 lines of code along with a code for the image.  I chose the theme glaciers.

I wanted to add a cool theme.  I was thinking either Rainbows, mountains, canyons, bears or Glaciers.  I asked my friend who specialiizes in photography and digital media and he told me glaciers would be the coolest theme since it's not talked about enough along with the fact that there are less of them by the day.

<html>
<head>
<title>Glacier</title>
</head>
<body style="background-image: url(images.jpeg);
background-repeat: no-repeat; background-attachment: fixed">
</body>
</html>

Just post those lines of code and your glacier webpage is up.  I've even added the image that you use on the webpage to design the glacier webpage.  By the way the .jpeg file is the same thing as a .jpg file.

In a few weeks I will discuss lesson 6 which involves creating a webpage with a header, site nav, main page, content page, and footer.  I'll go over a little bit of what these things do in my next tutorial for CSS on Wednesday while teaching you how to apply these things to a CSS webpage.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.