메인화면 이미지를 고정하고 화면만 올라가게하는 방법좀 알려주세요.

메인화면 이미지를 고정하고 화면만 올라가게하는 방법좀 알려주세요.

QA

메인화면 이미지를 고정하고 화면만 올라가게하는 방법좀 알려주세요.

본문

아래 사이트에 보면 메인 이미지가 고정이되어서 아래로 스크롤하면

이미지는 움직이지 않고 이미지 밑에서부터 화면만 올라가는데요

www.hobby-caravan.com

 

위 사이트 처럼 메인이미지는 움직이지않게 고정하고 싶습니다.

현재는 그누보드 테마(COMPANY THEME)  https://sir.kr/g5_theme/228?page=4 를 사용하고 있습니다.

 

아래는 현재 만들고 있는 사이트입니다.

https://sir.kr/g5_theme/228?page=4

 

아래로 스크롤할때 메인 배너(이미지)는 고정되어 있고 다른 화면만 위로 올라가게 하려면

어떻게 해야하나요?

 

프로그래머가 아니라서 어렵게 답변을 받았는데도 활용을 못 했습니다.. ㅠ ㅠ

초보중에 초보라 생각하시고 부탁 좀 드립니다...

 

 

메인화면과 관련된  CSS 파일과 index_head.php 소스코드 올려드립니다.

잘 부탁 드립니다...

 

 

1. CSS 파일(default.css)

=============================================================================

/*메인배너*/
#main_bn {background:#f1f1f1;position:relative;overflow: auto;width:100% !important}
#main_bn .bn_ul li{height:645px;float: left;}
#main_bn li.bn_bg1{background:url(../img/main_bn.jpg) no-repeat 50% 50%; background-size: cover;display: table;-ms-filter: sizingMethod='scale' property}
#main_bn li .bn_wr{width:1000px; margin:0 auto;padding-top:217px}
#main_bn li .bn_txt{background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:283px; height:205px;padding:25px}
#main_bn li .bn_txt h2{text-shadow: 0 1px 1px rgba(0, 0, 0, .3);color:#fff;font-size:2.667em;line-height:40px;margin-top:35px}
#main_bn li .bn_txt p{color:#fff;background:url(../img/bn_pbg.jpg) no-repeat top left;padding-top:20px;margin-top:20px ;font-size:1.34em;line-height:23px;}
#main_bn .bn_btn{position:absolute;top:240px;left:50%;width:1000px;margin-left:-470px}
#main_bn .bn_btn .prev{background:url(../img/bn_btn.gif) no-repeat;border:none;width:24px;height:24px;text-indent:-9999999px;overflow:hidden;display:inline-block}
#main_bn .bn_btn .next{background:url(../img/bn_btn.gif) no-repeat -27px 0;border:none;width:24px;height:24px;text-indent:-99999999px;overflow:hidden;display:inline-block}
#main_bn .dots{position:absolute;bottom:70px;text-align:center;width:100%}
#main_bn .dots li{border:none;text-indent:-9999px;width:48px;height:4px;background:#3e3c52;overflow:hidden;display:inline-block;margin:0 ; zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
#main_bn .dots li.active{background:#3d96d6}
===============================================================================

 

 

2. index_head.php

==============================================================================

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/head.php');
    return;
}

include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');

add_javascript('<script src="'.G5_THEME_JS_URL.'/unslider.min.js"></script>', 10);
?>

<!-- 상단 시작 { -->
<div id="hd">
    <h1 id="hd_h1"><?php echo $g5['title'] ?></h1>

    <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>

    <?php
    if(defined('_INDEX_')) { // index에서만 실행
        include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
    }
    ?>

    <div id="hd_wrapper">

        <div id="logo">
            <a href="<?php echo G5_URL ?>"><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>"></a>
        </div>

        <?php include_once(G5_THEME_PATH.'/head.menu.php'); ?>

        <ul id="tnb">
            <?php if ($is_member) {  ?>
            <?php if ($is_admin) {  ?>
            <li class="tnb_adm"><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>
            <?php }  ?>
            <li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
            <?php } else {  ?>
            <li><a href="<?php echo G5_BBS_URL ?>/login.php" ><b>로그인</b></a></li>
            <?php }  ?>
        </ul>
    </div>

    <hr>


</div>
<!-- } 상단 끝 -->

<hr>

<!-- 콘텐츠 시작 { -->
<div id="idx_wrapper">
    <!--메인배너-->
    <div id="main_bn">
        <ul class="bn_ul">
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>신뢰와 나눔속에  <br>사랑받는 기업으로</h2>
                        <p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>신뢰와 나눔속에  <br>사랑받는 기업으로</h2>
                        <p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>신뢰와 나눔속에  <br>사랑받는 기업으로</h2>
                        <p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
                    </div>
                </div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr">
                    <div class="bn_txt">
                        <h2>신뢰와 나눔속에  <br>사랑받는 기업으로</h2>
                        <p>우리의 원대한 도전,<br>새로운 100년이 깨어납니다</p>
                    </div>
                </div>
            </li>
        </ul>
        <div class="bn_btn">
            <a href="#" class="unslider-arrow prev">Previous slide</a>
            <a href="#" class="unslider-arrow next">Next slide</a>
        </div>
    </div>
    <!--메인배너-->
    <script>
    $(function() {
        var unslider = $("#main_bn").unslider({
            speed: 700,               //  The speed to animate each slide (in milliseconds)
            delay: 5000,              //  The delay between slide animations (in milliseconds)
            keys: true,               //  Enable keyboard (left, right) arrow shortcuts
            dots: true,               //  Display dot navigation
            fluid: false              //  Support responsive design. May break non-responsive designs
        });
        
        $('.unslider-arrow').click(function() {
            var fn = this.className.split(' ')[1];

            //  Either do unslider.data('unslider').next() or .prev() depending on the className
            unslider.data('unslider')[fn]();
        });
    });
   </script>

    <div id="idx_container">
        <?php if ((!$bo_table || $w == 's' ) && !defined("_INDEX_")) { ?><div id="container_title"><?php echo $g5['title'] ?></div><?php } ?>

===========================================================================

이 질문에 댓글 쓰기 :

답변 3

답변을 작성하시기 전에 로그인 해주세요.
전체 5
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT