update a div element value with text box value using jquery. | Learning Curve- Perfect Tutorial for the beginers

<!DOCTYPE html>
<html>
<head>
<style>
.std_div_name
{
color:red;
font-size=40px;
}
.maindiv
{
width:450px;
height:540px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<input type="text" id="stdname" name="stdname" onkeyup ="changeStudentname();">
<div class="maindiv"></div>
<div id="std_div_name" class="std_div_name"></div>
</body>
</html>
<script>
$(document).ready(function(){
$(".maindiv").css("background-image", "url('http://localhost/test/image_school/idcard.jpg') no-repeat;");
});

    function changeStudentname()
	{ 
	//$('#mainDiv').css("background-image", "url(/image_school/idcard.jpg)");  
	//$(".maindiv").css("background-image", "url(/image_school/idcard.jpg) no-repeat;");
	
	//$('.maindiv').css('background-image', "url('/image_school/idcard.jpg')");
	
	var stdname=$("#stdname").val();
	$("#std_div_name").text(stdname);
	}

</script>

<!DOCTYPE html>

<html>

<head>

<style>

.std_div_name

{

color:red;

font-size=40px;

}

.maindiv

{

width:450px;

height:540px;

}

</style>

</head>

<body>

</body>

</html>

$(document).ready(function(){

$(".maindiv").css("background-image", "url('http://localhost/test/image_school/idcard.jpg') no-repeat;");

});

function changeStudentname()

{

//$('#mainDiv').css("background-image", "url(/image_school/idcard.jpg)");

//$(".maindiv").css("background-image", "url(/image_school/idcard.jpg) no-repeat;");

//$('.maindiv').css('background-image', "url('/image_school/idcard.jpg')");

var stdname=$("#stdname").val();

$("#std_div_name").text(stdname);

}

</script>