그누보드5 기본 로그인창에 움짤삽입? (html)
본문
위 로그인 창 백그라운드에 html형식 움짤을 넣고 싶은데 방법을좀 알수있을까요?
제발 능력자분들 도움좀 부탁드립니다.
움짤 파일이 css와 js로 구성이 되어있어서 오랜만에 좀 다시 붙들어 보려고 하니까
상당히 많이 어려움이 있는거 같습니다.
제발 저에게 도움을 주실 천사분 어디 계십니까. ㅜㅜ
답변 3
로그인 박스부분 z-index 값을 높게 주고
그 값보다 낮게 absolute 포지션의 z-index 값을 주고
width:100% height:100% 이면 끝인데요~~
배경에 움짤을 삽입을 하고싶은데 맞는건가요?...
혹시나 참고 하시라고 유사한 홈페이지 올려봅니다..
메테오.net
배경에 움짤을 말씀하셨는데
움짤이라면 gif 일테고 background:url() 태그로 삽입하면되고
움짤이 아니라 비디오태그를 활용한 영상 파일을 넣는것이라면
https://offbyone.tistory.com/344
위 링크를 참조해보세요.
옵션에 따라서 버튼등을 안보이게 할 수 있습니다.
아래 코드대로 임의 html 저장해서 실행하면 위의 내용처럼 보일 겁니다
특히 body의 style의 배경관련 css적용이 중요합니다
이렇게 해야 gif이 화면에 꽉채워져서 보이게 됩니다
<!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>
답변을 작성하시기 전에 로그인 해주세요.