Solid Background Behind A Rotated Image In Pure Css

Is there a way i can draw the black 'background' behind the image using pure CSS ? I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I ha

Solution 1:

It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/

Added a div (sorry :-)

Solution 2:

The problem you're having is related to how pseudo-elements work.

Before and after elements are rendered inside their parent. So:

div:before{ content:'before'; } 
 div:after{ content:'after'; } 

renders basically like this:

<div> <span>before</span> Hello <span>after</span> </div>

You can't put other elements in img, because img is a replaced element, and therefore can't apply pseudo-elements to it. Read the spec.

So, the easiest option would be to wrap the image in an <a> (as images sometimes are) and apply your before style to the a.

Alternatively, accept the non-rotated shadow box-shadow provides.

CSS has limitations unfortunately, so you're going to have to compromise somewhere, either in design (I would argue this is the way to go) or in markup.

Solution 3:

<style>html (or body) {
    background: url();
}
</style>

I don't know if you just want it behind the image or the entire browser. If you want it behind the image only then you will need a wrapper or at least another <div>, <span> or <img>