在網頁開發中，使用HTML登錄框可以為網站或應用程序提供方便的登錄入口。同時，為了使界面更加美觀，我們可以添加背景圖來增加用戶體驗。下面是一個示例代碼，演示了如何創建一個HTML登錄框以及添加背景圖。
<html>
<head>
<title>登錄頁面</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
.input-field {
width: 100%;
padding: 10px 15px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.submit-btn {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-form">
<form>
<input type="email" placeholder="Email" class="input-field" required>
<input type="password" placeholder="Password" class="input-field" required>
<button type="submit" class="submit-btn">登錄</button>
</form>
</div>
</body>
</html>代碼中首先定義了body的樣式，其中background-image指定了背景圖的url，background-size設置為cover表示覆蓋整個頁面，background-position設置為center表示居中顯示。
接下來，使用CSS定義了一個名為.login-form的類，用于包含登錄框。這個類使用了position:absolute定位，并使用了translate(-50%,-50%)將元素中心點移至屏幕中央。width設置為300px，背景色為白色，設置了一些內邊距和圓角半徑等樣式。
登錄框中包含了一個表單，其中有兩個輸入框和一個提交按鈕。輸入框的樣式是.input-field，設置了寬度、內邊距、圓角、字體大小等樣式。提交按鈕的樣式是.submit-btn，設置了背景色、字體顏色、邊框、圓角、內邊距、字體大小、鼠標指針樣式等樣式。
以上就是一個簡單的HTML登錄框加背景圖的示例代碼。通過自定義CSS樣式，我們可以實現更加個性化、美觀的登錄框，提高用戶登錄的體驗。