Image tips & tricks
2012/05/20 Css resources, examples & tutorials for webmasters and online professionals
Image tips & tricks
You can do some amazing stuff with css and images. In this article I will give some quick hints that will get you started quickly when working with css stylesheets and images.
Border
By default images don't have a border, except when you put the image in a <a> (link) tag.
To quickly remove all image borders use:
img{ border: none }
It is also nice to give all your images a border, so that you get more uniformity on your site. Add a little padding to get some 'air' between the image and the border. You can also apply some margin to create some space around all your images.
img{
margin: 4px;
padding: 1px;
border: 1px solid #666;
}
Image and Text
Sometimes it is nice to have some text over your image. This is fairly simple and works best if you convert your image to a background image:<div style="width: 161px; height: 120px; background:url(/css/images/chrysanthemum.jpg)">
<h3 style="padding-top: 10px; color:#FFFFFF; width:100%; font-size:18px; text-align:center;">Orange flower</h3></div>
Leave a reply.