How to Resize Background Images with CSS3

December 29, 2020 admin

In this tutorial, we are going to see how to Resize Background Images with CSS3. You can use the CSS background-size: cover; property to resize a background image with CSS only. Let’s try the following example to see how it works.

CSS Code:

.container {
    width: 500px;
    height: 400px;
    background: url("https://stackhowto.com/test1.jpg") no-repeat;
    background-size: cover;
    border: 5px solid #000;
    margin: 10px;
}

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to Resize Background Images with CSS3</title>
		<style>
			/* Put the CSS Style Here */
		</style>
	</head>
	<body>
		<div class="container"></div>
	</body>
</html>