Images in CSS:

You already know that images are very important part of any web site, because images will make your web site more dynamic look. You have already learn how to insert an image in a HTML page if you don’t than go our (HTML Tutorial).

You can control the image properties with the help of CSS. In CSS there are following image properties:

  • Image Border
  • Image Height
  • Image Width
  • Image Opacity

Image Border:

You can set the border to an image. You can pass three parameters in border property. The color of border, the thickness of border which can be defined in pixels or in key terms, and the pattern of border like dashed.

A border with 0 pixel means no border.

Note:

When you are executing the programs of images always take an image that is available on your PC.

Example:

In following example we use three patterns of border “dashed”, “dotted” and “double”.

Image Height Property:

You can also manipulate the height of image means you can define the height of an image. You can assign height in pixels or percentage.

Example:

In following example we are using same images first one image is with its actual height and in second one image we assign the height of that image

Image Width Property:

You can also manipulate the width of image means you can define the height of an image. You can assign width in pixels or percentage.

Example:

In following example we are using same images first one image is with its actual width and in second one image we assign the width of that image

Image Opacity Property:

With the help of this property you can create a transparent image. For that you have to use “-moz-opacity” property in CSS.

In Mozilla (-moz-opacity:x) x can be a value from 0.0 – 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).

In IE (filter:alpha(opacity=x)) x can be a value from 0 – 100. A lower value makes the element more transparent.

Example:

We are using the Mozilla

 

Leave a Reply

Your email address will not be published. Required fields are marked *