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 -->

background 이미지 적용범위 질문입니다. 채택완료

답변 1개

background 이미지 적용범위 질문입니다. 채택완료

답변 1개

공유하기