Exploring CSS January 15, 2015


Starter Files

For the beginning of class, we’ll continue working on the Wendy Bite project.

Wendy Bite (download) (markup preview) (design preview)


Backgrounds in CSS

We’ll make use of various longhand background properties in class, including background-color, background-image, background-repeat, and background-position.

Keep in mind that with background-position in particular, things may not work exactly as our intuitions may guide us.

For examples, try the following background-position settings on an example of your own devising:

background-position: top left;
background-position: center center;
background-position: 20px 50px;
background-position: 25% 25%;
background-position: 100% 100%;
background-position: 50% 50%;

These will all work best if used in conjunction with background-repeat: no-repeat;, so that only one background image is placed.

Further Reading