답변 3개 / 댓글 1개
채택된 답변
+20 포인트
2020-04-04 (토) 16:55:06
로그인 박스부분 z-index 값을 높게 주고
그 값보다 낮게 absolute 포지션의 z-index 값을 주고
width:100% height:100% 이면 끝인데요~~
답변에 대한 댓글 1개
2020-04-04 (토) 17:01:17
별지기천사
2020-04-05 (일) 13:27:37
![]()
아래 코드대로 임의 html 저장해서 실행하면 위의 내용처럼 보일 겁니다
특히 body의 style의 배경관련 css적용이 중요합니다
이렇게 해야 gif이 화면에 꽉채워져서 보이게 됩니다
Copy
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style type="text/css">
body {
background: url('https://2.bp.blogspot.com/-YkELgIKUqWw/WehzSFeM1HI/AAAAAAAAA7I/FjCJ5PoOHBMakyDxW0b9zirq5AuLVsYWwCLcBGAs/s1600/%25E3%2585%2587%25E3%2585%2587.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#login_wrap {margin-top:200px; }
.login {width:360px; height:200px; margin:0 auto; background:#fff; border:1px solid #333}
.login p {text-align:center; }
</style>
<div id='login_wrap'>
<div class='login'>
<p>로그인 영역</p>
<p><input type="text" name="" placeholder="아이디" style="width:80%; height:20px"></p>
<p><input type="text" name="" placeholder="비밀번호" style="width:80%;height:20px"></p>
<p><input type="submit" style="width:80%;height:30px"></p>
</div>
</div>
</body>
</html>
2020-04-04 (토) 17:20:20
배경에 움짤을 말씀하셨는데
움짤이라면 gif 일테고 background:url() 태그로 삽입하면되고
움짤이 아니라 비디오태그를 활용한 영상 파일을 넣는것이라면
https://offbyone.tistory.com/344
위 링크를 참조해보세요.
옵션에 따라서 버튼등을 안보이게 할 수 있습니다.
답변을 작성하려면 로그인이 필요합니다.

혹시나 참고 하시라고 유사한 홈페이지 올려봅니다..
메테오.net