레이아웃에 배경이미지를 적용하고 배경 이미지가 좌로 슬라이딩 되면서 흘러가게 적용하는 방법입니다.
먼저 사용하고자 하는 레이아웃의 layout.html 파일을 편집기로 엽니다.
제일 하단에 아래 소스를 추가합니다.
<block cond="$li->back_img">
<load target="css/back.css" />
<block cond="!$li->back_col">{@ $li->back_col = 'transparent'}</block>
<block cond="!$li->back_opacity">{@ $li->back_opacity = '0.2'}</block>
<style>
#bg { background:{$li->back_col} url("{$li->back_img}") bottom left; opacity:{$li->back_opacity}; background-repeat:repeat-x; }
</style>
<div id="bg"></div>
</block>
info.xml 파일에 아래 코드 추가
<var name="back_img" type="image">
<title xml:lang="ko">★배경이미지</title>
<description xml:lang="ko">배경 이미지 등록(가로 1500px 정도의 크기가 적당)</description>
</var>
<var name="back_col" type="text">
<title xml:lang="ko"> ┖ 배경 색상</title>
<description xml:lang="ko">배경 색상을 선택 (기본 투명 transparent) </description>
</var>
<var name="back_opacity" type="text">
<title xml:lang="ko"> ┖ 배경 투명도</title>
<description xml:lang="ko">배경 투명도를 선택 (기본 0.2) </description>
</var>
css폴더에 back.css 파일 업로드 합니다.
#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
height: 100%;
left: 0;
position: fixed;
top: 0;
z-index:-1
}
@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}
@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}
@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}
@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}
#bg {
background-size: 2250px auto;
width: 6750px;
}
배경 색상 #348cb2 적용해 보세요
내 도메인 메일로 라이믹스에서 관리자 이메...
확장변수(날짜)로 위젯 정렬하기
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
