CSS Images

CSS Images: To design Web pages the images play a vital role through its not an appropriate approach to use a lot of images but still needed to use good images whenever required.

How to Add CSS Images

The images can be controlled on the web page with the help of CSS. In CSS the image properties should be as follows.

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

Image Border Property

The width of the border in an image can be done by the Image Border property. The value of this border property is in length or in %.

Image Border Property Example

In the following example, the width of the border is in 0 pixels which means ” no border” and another image with 5 pixels width.

<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "/css/images/logo.png" />
<br />
<img style = "border:5px dashed blue;" src = "/css/images/logo.png" />
</body>
</html>


Image Border Property Example OutputBorder Property Image output

Image Height Property

To set the particular height of the image, the height property is used on the web pages. The height property values are in length or in %. In case the value of this property is given in % then the image will be in the respective box of image.

Image Height property Example

<html>
<head>
</head>
<body>
<img style = "border:1px solid blue; height:80px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid blue; height:40%;" src = "/css/images/logo.png" />
</body>
</html>

Image Height property Example Outputimage Height property output

Image Width Property

The image width property is used to set the width of an image on the web page. The width property values are in length or in %. In case the value of this property is given in % then the image will be in the respective box of image.

Image width property Example

<html>
<head>
</head>
<body>
<img style = "border:1px solid blue; width:200px;" src = "/css/images/logo.png" />
<br />
<img style = "border:1px solid blue; width:120%;" src = "/css/images/logo.png" />
</body>
</html>

Image width property Example Outputimage width property output

The -moz-opacity Property

To set the opacity of an image, the -moz-opacity property is used.
The -moz-opacity property is used to create transparent images on the web pages in Mozilla whereas Internet Explorer uses filter.alpha(opacity=x).

  • In Internet Explorer (filter.alpha(opacity=x)) is used where x is the value from 0-100.The lower values make the image more transparent.
  • In Mozilla (-moz-opacity:x) is used where x is the value from 0.0-1.0. Here also the lower value makes the image more transparent. It is also same in CSS3 syntax opacity:x

The -moz-opacity Property Example

<html>
<head>
</head>
<body>
<img style = "border:1px solid blue; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>
</html>

The -moz-opacity Property Example Outputmoz-opacity output

NOTE: Use the image in your directory and change in the src attribute.