CSS Images Example
Image Border Property Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Border Example</title>
<style>
#borderimg1 {
border: 8px solid transparent;
padding: 14px;
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p id="borderimg1">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Output
Image Height Property Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Height Example</title>
<style>
img.normal {
height: auto;
}
img.big {
height: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="94" height="74"><br>
<img class="big" src="css.gif" width="94" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Output
Image Width Property Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Width Example</title>
<style>
img.normal {
height: auto;
}
img.big {
width: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="74" height="74"><br>
<img class="big" src="css.gif" width="74" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Output
Image Opacity Property Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Opacity Example</title>
<style>
div {
background-color: red;
opacity: 0.5;
filter: Alpha(opacity=50);
}
</style>
</head>
<body>
<div>Wellcome To My Website. My Name is Ammu. I Live in Telangana.
Wellcome To My Website. My Name is Ammu. I Live in Telangana.</div>
</body>
</html>
Output