Home/ Questions/Q 6887811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:55:49+00:00

Is there a way i can draw the black background behind the image using

  • 0

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 have also tried using shadows, but the final result is not similar what i am trying to achieve.

Scope and requirements:

Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.

Before answering:

I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!

image

Here is a fiddle and the code below.

img {
  position: absolute;
  top: 100px;
  left: 100px;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}
img:before {
  background: #000;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
  width: 300px;
  height: 300px;
  content: ".";
}
<!doctype html>
<html>

<body>
  <img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    Added a div (sorry 🙂

    • 0