<img border="0" src="mypicture.png" width="80" height="80" alt="SomeText" />

Specifying Image Size (e.g. using double resolution images for retina displays)

.header_logo {
background-image: url(images/header_logo.png);
background-size: 260px 55px;
width: 260px;
height: 55px;
border: none;
}

Adding an image (e.g. an icon) to the left of some text

background: url('images/archive.gif') no-repeat center left;
padding-left: 10px;

Cropping

overflow: hidden;

Curved Corners

border-radius: 4px 4px 4px 4px;

Specifying Image Class

<a href=”school_home.php”><img class=”my_thumb_class” src=”a.png” ></a>

img.my_thumb_class {

Floating An Image Over Content

<div class="some_outer_wrapper">
	<div class="my_floating_image"></div>
  My text etc....
</div>

.some_outer_wrapper {
  position: relative;	/*This is needed so the position of the imag is referenced off this outer wrapper*/
}
.my_floating_image {
	background-image: url(../lgimages/index/index_guest_box2_bubble.png);
	width: 359px;
	height: 403px;
	position: absolute;
	left: 300px;
	top: 50px;
}