CSS Tutorial Images

#hv_css_exp {
background-image: url(../images/hvcss.png);
background-repeat: no-repeat;
height: 300px;
width: 90%;
color: #000;
padding-top: 50px;
font-weight: normal;
font-size: 12px;
float: left;
}

Our HTML Element id=”hv_css_exp” has defined a line within the grouping to use the image hvcss.png as the background for that particular area.

Example background-image: url(../images/hvcss.png);

CSS Float Image

CSS has the capabilities to float your image Example:

img.floatLeft {
float: left;
margin: 5px;
}
img.floatRight {
float: right;
margin: 5px;
}

CSS Transparent Image

CSS Mouseover Image

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('css helpvid','','../images/helpvid-icon.jpg',1)"><img src="../images/up_helpvid-icon.png" alt="helpvid" name="css helpvid" width="88" height="88" border="0" id="css helpvid" /></a>

To place a rollover image go to the top menu in Dreamweaver, select Inset, Image Objects and select rollover image. Assuming you have your rollover images peppered, usually names as up and down, down being the rollover effect. From the pop up box give your image a name, then below you will see two fields to upload the images, first browse your computer and select the up image the original image, next do the same to find the down rollover image. Then place alternate text to give your CSS rollover image a description. Click OK and your image will appear, preview in your browser to see the rollover effect in action.