그누보드5 기본 로그인창에 움짤삽입? (html)

그누보드5 기본 로그인창에 움짤삽입? (html)

QA

그누보드5 기본 로그인창에 움짤삽입? (html)

본문

2049790397_1585984521.0226.png

 

위 로그인 창 백그라운드에 html형식 움짤을 넣고 싶은데 방법을좀 알수있을까요?

제발 능력자분들 도움좀 부탁드립니다.

움짤 파일이 css와 js로 구성이 되어있어서 오랜만에 좀 다시 붙들어 보려고 하니까

상당히 많이 어려움이 있는거 같습니다.

 

제발 저에게 도움을 주실 천사분 어디 계십니까. ㅜㅜ

 

이 질문에 댓글 쓰기 :

답변 3

로그인 박스부분 z-index 값을 높게 주고

그 값보다 낮게 absolute 포지션의 z-index 값을 주고

width:100% height:100% 이면 끝인데요~~

배경에 움짤을 말씀하셨는데

움짤이라면 gif 일테고 background:url() 태그로 삽입하면되고

움짤이 아니라 비디오태그를 활용한 영상 파일을 넣는것이라면

https://offbyone.tistory.com/344

위 링크를 참조해보세요.

옵션에 따라서 버튼등을 안보이게 할 수 있습니다.

thumb-2108916759_1586060844.1652_730x509.jpg

 

아래 코드대로 임의 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>
 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 28
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT