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>
답변을 작성하시기 전에 로그인 해주세요.