Web pages contain some images to explain more about a particular topic in picture form. In web Pages, Images play an important role. However, it is not recommended to include lots of images on one web page to violate the web page quality. let’s go towards your today’s topic(CSS image property and their corresponding values).
In CSS, you can control a way of image displaying on web pages.you have to follow some rules and apply the CSS image property and set to their values according to your point of view.
CSS Image properties
Table of Contents
1.Border
Border property is used to apply the border of an image with border-width and border-style.
2.Height
The Height property is used to apply the height or Vertical size of an image.
3.Width
The Width property is used to apply the width or wide horizontal size of an image.
4.Moz-Opacity
The -Moz-Opacity property is used to apply the opacity of an image.
Let’s see each property description with its examples.
1.CSS Image Border Property
Border property value can have set in the form of pixel or %.
<html>
<head>
<title>
CSS Border Property
</title>
<style>
#img1
{
border:solid white 5px;
}
</style>
</head>
<body>
<img id="img1" src="https://bittutech.com/CSS%20Gallery/css.jpg">
</body>
</html>
This will provide following result.
2.CSS Image Height Property
CSS Image Height property is used to apply the vertical size of an image.we can have set in the form of pixel or %.
<html>
<head>
<title>
CSS Border Property
</title>
<style>
#img1
{
height:200px;
}
</style>
</head>
<body>
<img id="img1" src="https://bittutech.com/CSS%20Gallery/css.jpg">
</body>
</html>
This will provide following result.
3. CSS Image Width Property
This property is used to set the size of an image horizontally.
<html>
<head>
<title>
CSS Border Property
</title>
<style>
#img1
{
width:400px;
}
</style>
</head>
<body>
<img id="img1" src="https://bittutech.com/CSS%20Gallery/css.jpg">
</body>
</html>
This will provide following Result.
4. CSS Image Moz-Opacity Property
This property is used to show the opacity value of an image.
<html>
<head>
<title>
CSS Border Property
</title>
<style>
#img1
{
opacity:.6;
-moz-opacity:.6; /*only apply on mozzila firefox browser*/
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img id="img1" src="https://bittutech.com/CSS%20Gallery/css.jpg">
</body>
</html>
