container 안에 문자가 반복해서 들어가게 하고싶습니다

container 안에 문자가 반복해서 들어가게 하고싶습니다

QA

container 안에 문자가 반복해서 들어가게 하고싶습니다

본문

초보라 아무것도 모르지만 질문해봅니다 ㅠㅠㅠ


container 안에 배경에 패턴처럼 문자가 반복되어서 들어가게 하고싶은데

그냥 body 안에 div 만들어서 글자 복붙해서 넣었더니 컨테이너를 튀어나가네요 ㅠㅠ(아래로요ㅠㅠ)


넣은 위치는

tail.php 에 <!-- } 콘텐츠 끝 --> 

의 위에다가 div만들어서 넣었습니다... 


컨테이너 안에만 있게는 어떻게 하면 될까요?

이 질문에 댓글 쓰기 :

답변 1


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>title</title>
        <style type="text/css">
        #container {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 20.0em;
            height: 20.0em;
            margin: -10.0em 0 0 -10.0em;
            background-position: 80% 80%;
            background-color: #fff;
            border: 1px solid #f00;
        }
        </style>
        <script type="text/javascript">
        function backgroundText(text, width, height, angle) {
            var rtn = null;
            if (text !== undefined) {
                var canvas  = document.createElement("canvas");
                
                if (width !== undefined) { canvas.width = width; }
                if (height !== undefined) { canvas.height = height; }
                
                document.documentElement.appendChild(canvas);

                var ctx = canvas.getContext("2d");
                ctx.translate(canvas.width / 2, canvas.height / 2);
                ctx.rotate(angle * Math.PI / 180);
                
                ctx.font = "1.0em Courier New";
                ctx.textAlign = "center";
                ctx.fillText(text, 0, 0);

                rtn = canvas.toDataURL("image/png");
                
                document.documentElement.removeChild(canvas);
            }

            return rtn;
        }
        
        document.addEventListener("DOMContentLoaded", function () {
            var dataurl = null;
            
            dataurl = backgroundText("Hello", 200, 200, -20);
            document.body.style.backgroundImage = "url(" + dataurl + ")";

            dataurl = backgroundText("How r u", 100, 100, -40);
            document.getElementById("container").style.backgroundImage = "url(" + dataurl + ")";
        }, false);
        </script>
        
    </head>
    <body>
        this is a body
        <div id="container">this is a container in the body</div>

    </body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
전체 30
QA 내용 검색

회원로그인

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