COM372-14 : Web Design and Development

Background Images

Lesson Number 20, October 10, 2014

Due For This Class

  1. Read Chapter 13 in your web design book.
  2. Read the articles from the lesson
  3. Don't forget to submit your CodeCademy that was due Wednesday.

Lesson Breakdown

  1. Happy Birthday, CSS!
  2. Beyond background-color - using background images

CSS is 20!

See the Pen Birthday Cake by Sonu Joshi (@sonu) on CodePen.

Background Images

The background-image property in CSS allows you to place any image behind the content of an HTML element. A background-image can be applied to almost any element (not just the whole page), and by default will repeat itself to fill the entire box.

When writing your CSS to include your background image, you want to use the structure url('path/to/img.png');.

body{
  background-image: url('../images/mybackground.png');
}

View an example

If you don't want your background image to repeat, you can set that as so:

body{
  background-image: url('../images/mybackground.png');
  background-repeat: no-repeat;
}

View an example

You can still have a background color if you're using a background image. You can also position the background image in a different spot (rather than the top left corner).

body{
  background-color: green;
  background-image: url('seamless-bg.jpg');
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 50px;
}

View an example

In-Class Activity - Adding Social Links to your Project Portfolio

  1. Open your project portfolio on your computer (not in Brackets. We want to view the files).
  2. Create a new folder - birthday

  3. Download this zip file. All of the files inside of it should go in your newly created birthday folder.

    Now you should have a birthday folder inside of your project portfolio, and inside of that birthday folder there are two other folders (css and img) and an index.html file.

  4. Open Brackets and open your project portfolio. Close all your currently opened files. Open the index.html this is in your birthday folder.

  5. Live preview it.

  6. Add a background image to the body. There is an image you can use in the img folder. To do so, add the following to your CSS.

    Add the following to the style.css that is in your CSS folder. 
    body{
background-image: url('../img/balloons.png');
}

  7. That makes our text really hard to read, doesn't it? Add a background color to your header, footer, and .birthday-message to make the text easier to read!

Homework