Background Size

Classic Method:

<style type="text/css">  

.box {  

position: relative;  

overflow: hidden;  

}  

    .box img {  

    position: absolute;  

    top: 0;  

    left: 0;  

    width: 50%;  

    height: 50%;  

    z-index: 100;  

    }  

    .box .content {  

    position: absolute;  

    z-index: 200;  

    }  

</style>  

  

<div class="box">  

    <div class="content">  

        <!--CONTENT-->  

    </div>  

    <img src="123.jpg" alt="" />  

</div>  

CSS3 Method:

<style type="text/css">  

.box {  

background: #ccc url(123.jpg) no-repeat;  

-webkit-background-size: 50%; /* Safari */  

-o-background-size: 50%; /* Opera */  

-khtml-background-size: 50%; /* Konqueror */  

}  

</style>  

  

<div class="box">  

    <!--CONTENT-->  

</div>