CSS- Using Images

To associate styles with your HTML document, there are four ways. Inline CSS and External CSS are most commonly used methods

Using CSS, you can set the following image properties:

  • To set the width of an image border, we use border property.
  • To set the height of an image, we use height property.
  • To set the width of an image, we use width property.
  • To set the opacity of an image, we use moz-opacityproperty.
  • The Image Border Property

    To set the width of an image border, we use border property of an image. The image property can have a value in length or in %.A width of zero pixels means no border.

    Example :-

    Result



    The Image Height Property

    To set the height of an image, we use the height property of an image. This property can have a value in length or in %. When we give a value in %, it applies it in respect of the box in which an image is available.

    Example :-

    Result



    The Image Width Property

    To set the width of an image, we use the width property of an image. This property can have a value in length or in %. When we give value in %, it applies it in respect of the box in which an image is available.

    Example :-

    Consider a simple style sheet file with a name mystyle.css having the following rules ?

    Result



    The -moz-opacity Property

    The -moz-opacity property of an image is used to set the opacity of an image, we use the moz-opacity property of an image. The property of moz-opacity is used to create a transparent image in Mozilla. Internet Explorer uses filter:alpha(opacity=x) to create transparent images.

    (-moz-opacity:x) x can be a value from 0.0 - 1.0 in Mozilla. If we give a lower value, it will make the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).

    (filter:alpha(opacity=x)) x can be a value from 0 - 100 in Internet Explorer. If we give a lower value, it will make the element more transparent.

    Example

    Result