메인 최근갤러리에 배경이미지 넣고싶습니다
본문
그 최근게시물 갤러리 배경을 이렇게 이미지로 하고싶은데;
어떻게 하면 될까요?
이런식으로 하고 싶습니다.
갤러리 latest.skin.php 소스
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$thumb_width = 210;
$thumb_height = 150;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="pic_lt">
<ul>
<?php
for ($i=0; $i<$list_count; $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['src']) {
$img = $thumb['src'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
$wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);
?>
<li class="galley_li">
<a href="<?php echo $wr_href; ?>" class="lt_img"><?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?></a>
<?php
if ($list[$i]['icon_secret']) echo "<i class=\"fa fa-lock\" aria-hidden=\"true\"></i><span class=\"sound_only\">비밀글</span> ";
echo "<a href=\"".$wr_href."\"> ";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
echo $list[$i]['subject'];
echo "</a>";
if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
if ($list[$i]['icon_hot']) echo "<span class=\"hot_icon\">H<span class=\"sound_only\">인기글</span></span>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
// echo $list[$i]['icon_reply']." ";
// if ($list[$i]['icon_file']) echo " <i class=\"fa fa-download\" aria-hidden=\"true\"></i>" ;
// if ($list[$i]['icon_link']) echo " <i class=\"fa fa-link\" aria-hidden=\"true\"></i>" ;
if ($list[$i]['comment_cnt']) echo "
<span class=\"lt_cmt\">".$list[$i]['wr_comment']."</span>";
?>
<div class="lt_info">
<span class="lt_nick"><?php echo $list[$i]['name'] ?></span>
<span class="lt_date"><?php echo $list[$i]['datetime2'] ?></span>
</div>
</li>
<?php } ?>
<?php if ($list_count == 0) { //게시물이 없을 때 ?>
<li class="empty_li">게시물이 없습니다.</li>
<?php } ?>
</ul>
<a href="<?php echo get_pretty_url($bo_table); ?>" class="lt_more"><span class="sound_only"><?php echo $bo_subject ?></span>더보기</a>
</div>
style.css
@charset "utf-8";
/* 새글 스킨 (latest) */
.pic_lt {position:relative;margin-bottom:20px}
.pic_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.pic_lt .lat_title a {color:#000;display:inline-block;position:relative}
.pic_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;}
.pic_lt .lt_more:hover {color:#777}
.pic_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_lt ul {margin: 0 -10px}
.pic_lt li {float:left;width:173px;padding:0 10px}
.pic_lt li.galley_li:nth-child(4n+1) {clear: both!important}
.pic_lt li .lt_img {margin:5px 0;display:block}
.pic_lt li .lt_img img, .pic_lt li .lt_img video{width:100%;height:auto}
.pic_lt li a:hover {color:#a22121}
.pic_lt li .fa-heart {color:#ff0000}
.pic_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-caret-right {color:#bbb}
.pic_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt .profile_img img{border-radius:50%}
.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}
.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}
.pic_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.pic_lt .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.pic_lt .lt_more:hover {color:#777}
답변 3
게시물에 첨부한 파일(이미지)를
제목이 들어 가는 영역에 배경으로 지정하고 싶으신 건가요?
네 그렇습니다 ㅠㅠ
.pic_lt li {float:left;width:173px;padding:0 10px;
position: relative:}
.....
.pic_lt li .lt_img {margin:5px 0;display:block;
position: absolute; top:0; left:0;}
<div class="lat_title">
<a href="<?php echo $wr_href; ?>">
<?php
if ($list[$i]['icon_secret']) echo "<i class=\"fa fa-lock\" aria-hidden=\"true\"></i><span class=\"sound_only\">비밀글</span> ";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
echo $list[$i]['subject'];
if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
if ($list[$i]['icon_hot']) echo "<span class=\"hot_icon\">H<span class=\"sound_only\">인기글</span></span>";
if ($list[$i]['comment_cnt']) echo "<span class=\"lt_cmt\">댓글 " . $list[$i]['wr_comment'] . "</span>";
?>
</a>
</div>
이렇게 수정 해주시면 됩니다.
저기 갤러리 배경 이미지는 어떻게 추가하나요?
경로가 안보여서 ㅠㅠ 어디에 있을까요?ㅠㅠ
그리고 어디에 추가해야할지 모르겠네요 ㅠㅠ
어떤부분을 저렇게 수정 해야될까요?
배경요?
배경요? 아님 이미지?
이미지 경로는 여기 이미 설정되어 있어요
if($thumb['src']) {
$img = $thumb['src'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
<li class="galley_li"> 감사고 있는 안에 체인지 하시면됩니다.
.pic_lt li.galley_li {background:url('이미지경로') no-repeat center center;}
이렇게 추가하세요.
아래 참조
https://ofcourse.kr/css-course/background-%EC%86%8D%EC%84%B1
