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
<div class="parallax"
<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>
<div class="parallax2">
컨텐츠영역 값필요
</div>
로보이네요
패럴렉스 클레스에 height값을 퍼센트가아닌 다른값으로 주면됩니다
padding 값으로 영역 확보하셔도되구요
시간이 지나서 댓글이 안달리는지.. height 값을 100% 말고 ex)200px 로 주시던지
컨텐츠 영역값이라고 표시한곳에 영역값을 별도로 주시던 값을 주셔야됩니다
padding 으로 처리하시던지요