Menu

Downloads

Links



All About Images



How do I work with images using CSS?

Images and Borders
You can either remove borders that show up, thanks to linked images, or define the borders yourself, with this code. To remove the border completely, you would use this.

<style type=text/css">
img {border:none;}
</style>


To decorate the image border each time an image shows up on the page, you would use this code, and then change properties as you see fit.

<style type=text/css">
img {background: #FFFFFF; padding: 5px; border: 5px solid #000000;}
</style>


You could even go so far as to have each side of the border a different color, by using a code like this!

<style type=text/css">
img {background: #FFFFFF; padding: 5px; border-top: 5px solid #000000;border-bottom: 5px solid #D3D3D3;border-right: 5px solid #FFCCFF;border-left: 5px solid #FF33FF;}
</style>



Position an Image
To position an image anywhere you want on the page, use this code. Change the "top" value in pixels to how far from the top of the page the image should appear. Set the "left" value in pixels to hor far from the left of the page the image should appear. Add in the height and width values of your image, and the exact URL of your image.

<img style="position:absolute; top:0px; left:0px; width:0px; height:0px" src="IMAGE URL">