Resize & Crop Image using CSS

buat div dimana tempat image akan di tampilkan/display:

.img-div{
	width:155px; 
	height:146px; 
	float:left; 
	display:block; 
	overflow:hidden; 
	position:relative;
}

crop image agar sesuai dengan ukuran div yg telah dibuat diatas:

.img-crop{
    max-height: 146px;
    min-width: 155px;
    position: relative;
    top: 0;
}

applying ke html:

<div id="img-div">
	<img class="img-crop" src="images/fileimage.jpg">
</div>

Make Div Into Link

It’s easy to make a div into a link using a bit of javascript. You can use this technique to make any div “clickable”. For example, you might want your “header” div to link to your home page. Here’s how:

<div onclick="location.href='page.html';"></div>

That’s it!

source: http://trevorturk.wordpress.com

css full image background

below is sample of Perfect Full Page Background Image, Awesome, Easy, Progressive with CSS3 Way

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Works in:

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

CSS-Only with Technique #2
html:

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

css:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Works in:

Safari / Chrome / Firefox (didn’t test very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

source: http://css-tricks.com