Background Image
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<Link rel="stylesheet" href="BackgroundImage.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image</title>
</head>
<body>
<div id="one">Image 1</div>
<div id="two">Image 2</div>
<div id="three">Image 3</div>
</body>
</html>
CSS
/* BACKGROUND-SIZE:CONTAIN repeats the image
*/
#one {
height: 100px;
width: 150px;
background-color: antiquewhite;
border: 20px solid black;
background-image: url(https://images.unsplash.com/photo-1720511485583-1b70c1726f07?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzfHx8ZW58MHx8fHx8);
background-size: contain;
}
/* BACKGROUND-SIZE:COVER crops the image */
#two {
height: 100px;
width: 150px;
background-color: antiquewhite;
border: 20px solid black;
background-image: url(https://images.unsplash.com/photo-1723984489704-95d6fb7fcd33?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8);
background-size: cover;
}
/* BACKGROUND-SIZE:AUTO stretches the size */
#three{
height: 100px;
width: 150px;
background-color: antiquewhite;
border: 20px solid black;
background-image: url(https://images.unsplash.com/photo-1724427245256-282439d3421a?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8);
background-size: auto;
}
Comments
Post a Comment