Profile Card

A simple challenge, and yet I spent more time on this than any other.

The similarities and differences between using position and margin to shift elements were emphasised here. When shifting the avatar upwards my instinct was to go for position: absolute. This led to having to put a calculated extra margin above the text to stop it colliding with the avatar. At some point I realised I could shift the image up with negative margins alone and then the avatar would still own its own space, a nicer solution.

The relationship between pseudos and images continues to be a tricky one. An img by default has a descender, you can remove this easily in CSS, but not when you reference an image via a url(). If you put url() in content then you get a descender. If you put url() in background then it appears you do not. If in background then you need to give a size to the content otherwise it has none. I probably think that the HTML/CSS should control the size of the box an image is displayed in & not the image itself, thus I put the card pattern in the background and set height.