웹 페이지에서 화면 전체를 채우는 배경 이미지 위에 회원가입이나 로그인 폼을 배치하면 시각적으로 매력적인 사용자 인터페이스를 만들 수 있습니다. 핵심은 background-size: cover 속성으로 배경 이미지가 영역 전체를 덮도록 하고, position 속성을 활용해 폼을 원하는 위치에 배치하는 것입니다.
핵심 CSS 개념 정리
- background-size: cover — 배경 이미지가 컨테이너 크기에 맞춰 확대·축소되며 전체를 꽉 채우도록 설정합니다.
- position: relative — 부모 요소(배경 이미지 컨테이너)에 적용하여 기준점을 만듭니다.
- position: absolute — 자식 요소(폼 컨테이너)에 적용하여 배경 위에 겹쳐 배치합니다.
- box-sizing: border-box — 패딩과 테두리를 포함한 크기 계산으로 레이아웃이 어긋나는 것을 방지합니다.
예제 코드
다음은 CSS를 사용하여 전체 너비 배경 이미지 위에 폼을 추가하는 완전한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {box-sizing: border-box;}
.backgroundImage {
height: 100%;
background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.formContainer {
position: absolute;
right: 40%;
max-width: 400px;
margin: 20px;
padding: 16px;
background-color: white;
}
label{
font-size: 20px;
font-weight: bolder;
}
input[type=text], input[type=password] {
width: 100%;
font-size: 18px;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #e3ff95;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.btn-login {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<div class="backgroundImage">
<form class="formContainer">
<h1>Register Here</h1>
<label for="eMail">Email</label>
<input type="text" placeholder="Enter your Email ID" name="eMail" required>
<label for="pass">Password</label>
<input type="password" placeholder="Enter your Password" name="pass" required>
<label for="Address">Address</label>
<input type="text" placeholder="Enter your Address" name="Address" required>
<button class="btn-login">Login</button>
</form>
</div>
</body>
</html>코드 설명
.backgroundImage 클래스는 height: 100%로 화면 전체 높이를 차지하며, 배경 이미지를 가운데 정렬하고 반복 없이 cover 방식으로 채웁니다. 여기에 position: relative를 지정해 내부 요소의 위치 기준점 역할을 합니다.
.formContainer는 position: absolute와 right: 40%를 사용해 배경 이미지 위 특정 위치에 흰색 카드 형태로 배치됩니다. max-width: 400px로 폼의 최대 너비를 제한하여 모바일 환경에서도 자연스럽게 표시됩니다.
입력 필드는 초록빛 배경(#e3ff95)을 가지며, 포커스 시 회색(#ddd)으로 변경되어 사용자에게 시각적 피드백을 제공합니다. 로그인 버튼은 width: 100%로 폼 전체 너비를 차지하도록 설정했습니다.
실행 결과
위 코드를 실행하면 다음과 같이 배경 이미지 위에 흰색 폼이 배치된 화면을 확인할 수 있습니다.
