CSS Images

Images are very important part of any webpage. Though it is not recommended to use a lot of images in a webpage , but it is still important to use good images wherever required. With the help of CSS a user can display images in an attractive manner.To display images the properties are used in CSS.

  • Border: This property is used to set the width of an image border.
  • Height: This property is used to set the height of an image.
  • Width: Width property is used to set the width of an image.
  • -moz-opacity: This property is used to set the opacity of an image.

Image Border Property

The border property of an image is used to set the width of an image border. This property can have a value in length or in %.


Image Border example


The following image is without border



The following image is with dashed border


Image Border Property

The height property of an image is used to change the height of an image. This property can have a value in length or in %.


Image Height example in length and % :

The following image is with length


The following image is %

Image width Property

The Width property of an image is used to change the width of an image. This property can have a value in length or in %.


Image Height example in length and % :

The following image is with length


The following image is with %


-moz-opacity Property

The -moz-opacity property of an image is used to Change the opacity of an image. This property is used to create a transparent image in Mozilla & IE.

In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A smaller value effects the element more transparent.

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

Opacity Property Example


Example

Try It Yourself