CSS-image

Image

background image

<!DOCTYPE html>
<html>
<head>
<title>Css background image
</title>
<style>
body
{
background-image: url(marble-surface-2341290.jpg);
margin-right:10px;
height: 200px;
}
</style> </head>
<body>
web pathshala best learning image
</body>
<</html>

Output

wed pathshala

link with image

<!DOCTYPE html>
<html>
<head>
<title>link image
</title>
</head>
<body>
<a href="cssfile5.html">
<img src="drink (2).jpg" height="200px" width="200px;"></a>
</body>
<</html>

Output

click here

thumbnail

In css a thumbnail is a small image that represents a larger image

;
<!DOCTYPE html>
<html>
<head>
<title>Css thumbnail image</title>
<style>
body
{
.pic{
width:30%;
display: block;
padding: 4px;
margin-bottom: 20px;
margin-top: 50px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float:left;
margin-left:1%;
}
.thumbnail
{ display: block;
max-width: 100%
height: auto;
}
.caption{
color:#000;
padding:0px 10px 10px;
font-weight: bold;
text-align: center;
}
</style>
<a href="heart.jpg" >
<img src="heart.jpg" alt="" class="thumbnail">
<div class="caption">
<h2>heart</h2>
<p>Choose among the best available in the world</p>
</div> <</a>
</div>
</body>
<</html>