Ever had an image that you could not re-size, or did not want to re-size, however wanted to crop? Maybe the image was too large for your page or, you just wanted to show a small portion of the image. Using this technique you can also position text on top of the image, like a caption, without having to edit the image. This a very cool method to use, if for SEO purposed or to be reference the text in the HTML.
The intention is for you to use the CSS in the header of your document or in a linked Cascading Style Sheet (.css)
First lets start with an image as illustrated below:
I need to crop this image and I want to give it a caption directly on the photograph. For this particular instance I just need to show the front of the vehicle.
First I will start by creating a DIV contain for this:
<div><img src=”http://myserver/mycar.jpg”></div>
Above is a line of code that creates just a simple container. Next we need to create a class for the image for the CSS. You will actually use the class tag within the image tag to call to the CSS. The CSS class beloow will be added to your stylesheet.
.image {
border-width: 1px;
border-color: #ffffff;
border-style: solid;
width:225px;
height:70px;
background-position:50% 95%;
background-repeat:no-repeat;
}
In the CSS code above, I have created an image class with a 1 px border and and an area much small than the image. I have also told the background not to repeat itself.
Above you will see my cropped image with a title at the top in black. To make the image appear you HAVE to put in some kind of text for the image to show.This is what I used for the code:
<div class=”image” style=”background-image:url(http://myserver/mycar.jpg)”><div>Pontiac G6</div></div><br />
Notice that I had to use a little in-line CSS to make the image appear (background-image). This way, you do not have to put the background-image URL in your style sheet, in the case if you want to have several images cropped with a specific size using the .image tag as a reference. Also make sure to have the break behind the last DIV.
Now, how would I make the text in visible in a different position and in a different color? Start by creating a “title” class like we previously created the “image” class.
.title {
font-family: Arial, Gadget, sans-serif;
font-size: 14px;
font-weight: bold;
color:yellow;
position: relative;
top: 25px;
left: 30px;
}
Above you will see that I have positioned the text and have styled it to be a different font, color, and weight. By setting the position to Relative and adjusting the top and left, you can position your text to be anywhere within this DIV container.
Again, this is a case where we created a style with the CSS file so that we could create a “template” of sorts that we could reference again. The other method is to put all of the styling within a “style=” tag within the DIV.
