Using a background image

In your final project, some of you may want to use images in ways that seem awkward at first. Maybe you have forgotten that an image can be used as a background for any container-type element in HTML: a div, an article, a section, etc.

Here’s an example of the same image (one image) used to “cover” the background of three different-sized divs, with the image centered in each case. This is done with CSS. Robbins explained this where she talked about the background property in CSS.

Notice how I wrote white text over top of the image using normal HTML <p> tags.

Here’s the code (HTML and CSS only) for that example.

You’ll notice that Codepen is a site similar to jsFiddle, only more beautiful. It’s a good place for searching for solutions to tricky CSS and Bootstrap problems you need to solve. Just make sure you link to the exact Pen you used if you copy any code from Codepen! You may also embed the URL to the Pen in your CSS or JavaScript as a comment.

Do not steal code and fail to give credit to where you found it. Always include a complete URL for any copied code so that you don’t break the plagiarism rules.

Advertisements

Storytelling

It’s no secret that I love NPR visuals. These are lovingly handcrafted stories that stand out from all the great audio stories by NPR because these stories cannot be told on radio — or if they are, they are very different.

The most recent example: Rain Forest Was Here.

Screen capture from NPR

Not only are the wall-to-wall photos responsive at any size — from small phone screen to giant desktop — but this story also plays perfectly in vertical mode on a phone. Try it and see.

Stories like this are no accident. There’s a philosophy behind them. A guy at NPR named Wes Lindamood, whose job title is senior interaction designer, wrote about that philosophy here:

The Evolution of NPR’s Picture Stories

I love seeing innovation in storytelling because it’s all about making the audience sit up and pay attention. There are so many stories, so much media, so many distractions. How can you make somebody pay attention?