parallax가 영카트에서 작동하지 않는 이유?
본문
<style>
.parallax {
/* The image used */
background-image: url('http://www.tigernip.co.kr/theme/everyday/img3/pc_bottom3.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
/* The image used */
background-image: url('http://www.tigernip.co.kr/theme/everyday/img3/pc_bottom3-2.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
</style>
<div class="parallax"></div>
<div style="height:300px;background-color:white;font-size:36px">
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
<div class="parallax2"></div>
위 소스로 샘플.html 으로 만들어서 테스트해보면 메세지나 내용은 정상적으로 나오는데
영카트에서 메인페이지 또는 내용관리로 페이지를 생성해서 집어넣으면 이미지는 출력되지 않고
작동을 하지 않습니다.. 중간에 있는 영문 메세지만 나오는데 이유가 왜 그런걸까요.... ㅠㅜ....
별도의 자바스크립트나 제이쿼리를 사용하는것도 아닌것같은데 왜 영카트에서만 그러는지 ㅠㅜ
고수분들의 답변 부탁드립니다......
구동환경은 영카트5입니다
답변 2
.parallax, .parallax2 높이를 %가 아닌 px로 해서 높이를 변경해보세요.
클래스의 이름들 parallax, parallax2 를 다른이름으로 변경해보셔요
따로 불러오는 css의 중복이나 충돌이 있을수도 있겠네요.