css에서 이미지 삽입하려고 하는데요
본문
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:25px;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.5em;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}
index.php부분
<!-- 상단 시작 { -->
<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.jpg" alt="<?php echo $config['cf_title']; ?>"></a>
</div>
<?php include_once(G5_THEME_PATH.'/head.menu.php'); ?>
<fieldset id="hd_sch">
<legend>사이트 내 전체검색</legend>
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<label for="sch_stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
<input type="text" name="stx" id="sch_stx" maxlength="20">
<input type="submit" id="sch_submit" value="검색">
</form>
<script>
function fsearchbox_submit(f)
{
if (f.stx.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.stx.select();
f.stx.focus();
return false;
}
// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
var cnt = 0;
for (var i=0; i<f.stx.value.length; i++) {
if (f.stx.value.charAt(i) == ' ')
cnt++;
}
if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
return true;
}
</script>
</fieldset>
<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>市场占有率</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>남양유업은 <br>한국 최대의 유제품 회사로</h2>
<p>한국 영유아 유제품 시장에서 <br>압도적인 점유율을 보이고 있습니다</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>南阳乳业 <br>以累月经年浓缩的技术力</h2>
<p>以累月经年浓缩的技术力,<br>将展示Premium奶粉雅康美</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>남양유업은 <br>수 년간 응축된 기술력으로</h2>
<p>프리미엄 분유 야캉메이를<br>선보입니다</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>
답변 1
CSS로 이미지 삽입하는 법은 아래 좌표 참고하세요.
http://www.homzzang.com/b/css-33
http://www.homzzang.com/b/css?sca=background
HTML로 이미지 삽입하는 법은 아래 좌표 참고하세요.
