This has taken me way, way too long so I'm hoping someone will be able to help https://jsfiddle.net/axvogdq4/ In the fiddle I have 3 columns and each of the grey bordered columns should have a small graphic in the top left corner. because I need the graphic to sit over the border I'm using :after. It works for .gold:after and .silver:after but not .principal:after. The obvious problem is a typo but that all looks ok. Any clues? Once I have it working I can go back to the designer and get production quality images. She supplied gifs!
.principal::after { background: blue url("http://static.nzpif.org.nz/img/pimms2/partnerspage/principal-noborder.png") no-repeat scroll 0 0; border: 1px solid red; content: ""; <<<<<<<<<< Missing in original. height: 96px; left: -6px; position: absolute; top: -6px; width: 96px; z-index: 10; <<<<<<<<<<<<<<<< unnecessary opportunity for error. } Code (markup): You forgot to give it any content. It would be a Good Thing to set the parent container to {position: relative;}. cheers, gary
oh poo, I didn't realise that was required so I took it out. Haven't needed to use :after until now. I would have thought the position would have been relative but the image goes awol when I make that change
I hadn't thought about its being required, but I have always had something to stick after. I just diffed a working element's styles with the non-working version. Voilà! Either I have misunderstood you, or vice versa. This is what I meant: .principal { ... position: relative; ...} .principal::after { ... position: absolute; ...} Code (markup): gary
aah, yep, I've got that only the relative is on .section which is generic for the 3 corner tabs and then .principal comes in just to tie to a specific image.