How to add a responsive image using pseudo-elements

I try to add a box shadow and a gradient border using images and css pseudo-elements.

I tried that code:

.box:before {
    content: url('box-shadow.png');
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    z-index: -1;
    bottom: -9px;
    line-height: 0;
}
.box:after {
    content: url('box-border.png');
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    bottom: -5px;
    right: 0px;
}

But the added images don't resize when the parent div resizes, whereas it works by adding the image manually.

See that fiddle http://jsfiddle.net/5TG3E/2/

Answers


I try from my side may be that's help you. Write like this:

.box:after {
    content:'';
    position: absolute;
    z-index: -1;
    bottom: -9px;
    margin: 0 auto;
    top:0;
    left:0;
    right:0;
    background:url('http://dl.dropbox.com/u/4812171/box-shadow.png') no-repeat bottom center;
    -moz-background-size:100% 9px;
    background-size:100% 9px;
}
.box:before {
    content:'';
    position: absolute;
    bottom: 0px;
    right: 0px;
    left:0;
    top:0;
    background:url('http://dl.dropbox.com/u/4812171/box-border.png') no-repeat bottom right;
}

Check this http://jsfiddle.net/5TG3E/6/


Need Your Help

Configuring log4j at runtime

ant log4j

I'm using org.apache.tools.ant.listener.Log4jListener to manage logging with my ant script. The ant script is highly configurable and designed to be run different ways with different parameters and

Memory management, release needed?

iphone objective-c cocoa-touch

I wonder if someone could quickly help me with the following, do I need to add a [myTableView release]; after I call [view addSubview:[self myTableView]]; ? Initially I was thinking no, and running...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.