background 이미지 적용범위 질문입니다.
본문
홈페이지 인트로 이미지를 백그라운드 이미지를 이용하여 만들었습니다.
현재 상황은
메뉴
인트로이미지
컨텐츠
순 인데요.
인트로 이미지를 메뉴위에 부분까지 적용하려면 어떤부분을 건드려야 하나요?
예를들면
|---------------------------------|
| 메뉴 |
인트로이미지- ---------------------------------| 변경될 인트로 이미지 크기 및 위치
| 현재 인트로 이미지 위치 |
| --------------------------------|
컨텐츠
인덱스에서 인트로 불러오는 소스는
<div class="slide_bar "> <?include_once(G5_THEME_PATH.'/swiper.html');?></div>
입니다.
swiper.html코드입니다.
<style>
.swiper-slide{height: 100%;
width: 100%;
/*position:fixed;*/
top: 0px;
left: 0px;
overflow: hidden;
/* animation: swiper-slide-animation 10s linear infinite 0s;;*/
}
/*.bg-slide{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
}*/
.swiper-slide img{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0px;
left: 0px;
opacity: 1;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
/* -webkit-animation: swiper-slide-animation 30s linear infinite 0s;
animation: swiper-slide-animation 30s linear infinite 0s;*/
}
.swiper-wrapper .swiper-slide.swiper-slide-active img{
-webkit-animation: swiper-slide-animation 30s linear infinite 0s;
animation: swiper-slide-animation 30s linear infinite 0s;
}
.banner{
background-image: url('<?php echo G5_THEME_IMG_URL ?>/slide_img_6.png');
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
.banner2{
/* background-image: url("/theme/aidd2/img/slide_img_j_2.png");*/
background-image: url('<?php echo G5_THEME_IMG_URL ?>/slide_img_7.png');
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
@-webkit-keyframes swiper-slide-animation {
0% {
-webkit-animation-timing-function: ease-in;
opacity: 1;
}
10%{
-webkit-transform: scale(1.1);
-webkit-animation-timing-function: ease-out;
opacity: 1;
}
30%{
-webkit-transform: scale(1.3);
opacity: 1;
}
50%{
-webkit-transform: scale(1.3);
opacity: 1;
}
100%{opacity:1}
}
@keyframes swiper-slide-animation {
0% {
animation-timing-function: ease-in;
opacity: 1;
}
10%{
transform: scale(1.1);
animation-timing-function: ease-out;
opacity: 1;
}
30%{
transform: scale(1.3);
opacity: 1;
}
50%{
transform: scale(1.3);
opacity: 1;
}
100%{
opacity: 1;
}
}
.main_text_style_tit{font-size:48px;font-weight: 900; color:#fff}
.main_text_style_sub{font-size:25px; font-weight: bold; color:#fff; margin-top:20px;line-height: 24px;}
.text_box_area_ex{z-index: 99999;position:absolute;top:300px;left:20%; color:#fff}
</style>
<body>
<div class="swiper-container" style="width: 100%; height: 517px; min-width:500px; overflow: hidden">
<div class="swiper-wrapper" style="width: 100%; height: 517px;">
<div class="swiper-slide" style="width: 100%; height: 100%; overflow: hidden">
<img class="banner">
</div>
<!-- 슬라이드 메뉴-->
<div class="swiper-slide" style="width: 100%; height: 100%; overflow: hidden">
<img class="banner2">
</div>
<!-- <div class="swiper-slide" style="width: 100%; height: 100%;">
<img src="<?php echo G5_THEME_IMG_URL ?>/slide_img_2.png" alt="슬라이드3" style="width: 100%; height: 100%;">
</div>-->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination" style="width: 100%; top: 90%;"></div>
<!-- If we need navigation buttons -->
답변을 작성하시기 전에 로그인 해주세요.
