Exploring CSS April 9, 2014

Note: I’m posting this in retrospect of yesterday’s class.


We explored more in-depth some of the CSS properties that we started to look at in the last class, and expand on them.


Backgrounds in CSS

We made 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