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

레스피아 7년 전 조회 3,594

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

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

http://www.hobby-caravan.com">www.hobby-caravan.com

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

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

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

https://sir.kr/g5_theme/228?page=4" target="_blank">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

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

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('', 10); ?>

본문 바로가기