* {margin: 0; /* used to try and remove some defaults */ padding: 0; line-height: 1em; text-indent: 0; } #sample a {display: block; /* to allow for height/width and so on to be declared */ margin: 1em auto; /* to center the a in the page */ background: #fff url(img/png-img-300x150.png) 0 0 no-repeat; width: 300px; /* defined by the image size */ height: 150px; /* as above */ color: #fff; /* to stand out on the background img */ font-weight: bold; /* as above */ font-size: 2em; /* and again... */ text-align: center; /* horizontally center the text in the defined box */ line-height: 150px; /* defines the line height to allow for vertical center. */ /* the value is defined by the size (height) of the image. */ border: 10px solid rgba(255,0,0,0.5); /* just to add visual definition to the shape */ }