Scaling generated content in CSS

Question

How do you scale an image added in :before or :after in CSS?

For example, I have a page which contains a book cover:

<span class="book">
    <img src="http://ecx.images-amazon.com/images/I/41t7xMPK%2B6L.jpg" />
</span>

I want to use CSS to make it look more like a book, rather than just a cover. I can use :before to add a second image to do this, but as all books vary in size, I need to be able to scale this image to fit the book cover.

I have tried

.book:before{
    content:url("/images/book.png");
    position:absolute;
    height:100%;
    width:100%;

}

but this doesn't work in scaling the image.

Answer 1

you can scale it:

transform: scale(0.7);

but it won't work with px or %.

Answer 2

The generated image is always displayed 1:1. You cannot scale it. When you fix the size of the generated element, that works well. You could check it with the following CSS attributes:

#logo-image:before
{
    display: block;
    content: url(img/logo.png);
    width: 300px;
    height: 100px;
    border: solid 1px red;
    overflow: scroll;   /* alternative: hidden */
}

You can see the red border at the specified size, and the image content is clipped. But if you leave out the overflow:scroll, you will see the image exceeding its element.

(Tested on Firefox 11)