초보 CSS 문의드립니다.
관련링크
http://haerim.woweb.net/
37회 연결
본문
안녕하세요
테마 적용 후 조금 변경하려고 하는데..
잘 안되네요.. 도움 부탁합니다.
현재 구글아이콘이 적용되고 있습니다.
구글 아이콘 대신 제가 사용하고 싶은 이미지를 적용하고 싶습니다.
백그라운드 컬러 대신 이미지를 적용하고 싶습니다.
박스안에 꽉 채우고 싶습니다.
도움 부탁드립니다.
modern-business.css 파일내
/*
아이콘박스
**********/
.h75{height:75px;}
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon > .info { margin-top: -24px; border: 1px solid #e0e0e0; padding: 15px 0 10px 0; height:257px; }
.box > .icon > .info > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-weight:600; color: #666; line-height: 1.7; margin: 20px; text-align:center;}
.box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box .space { height: 30px; }
.info i{font-size:60px;}
/* info-pink */
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #6c757d; vertical-align: middle; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon > .info-pink {
margin-top: -24px;
border: 1px solid #e0e0e0;
padding: 15px 0 10px 0;
background: #457b9d;
color: #fff;
height:257px;
}
.box > .icon > .info-pink > h3.title { margin-top:20px; font-size: 20px; color: #222; font-weight: 500; }
.box > .icon > .info-pink > p { font-weight:600; color: #fff; line-height: 1.7; margin: 20px; text-align:center;}
.box > .icon > .info-pink > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box .space { height: 30px; }
.info-pink i{font-size:60px;}
index.php 파일내
<!-------------------------- 아이콘박스 -------------------------->
<div class="container margin-top-60">
<div class="center-heading ks4">
<h2>어종별 <strong>조황사진</strong> </h2>
<span class="center-line"></span>
<p class="sub-text margin-bottom-80 ks5 f19">
한 눈에 확인하세요.
</p>
</div>
<div class="row padding-top-20">
<div class="col-lg-3 col-md-3 col-sm-12 col-12">
<div class="box">
<div class="icon">
<div class="info">
<img src="<?php echo G5_THEME_IMG_URL ?>/ico/black_sea_bream.png">
<p class="ks4 f14 h75">
감성돔</br>
· 9월 ~ 11월까지</br>
· 출조시간 : 오후 6시 ~ 새벽 2시</br>
· 시간 조정 가능
</p>
<div class="margin-top-20 margin-bottom-20">
<button type="button" class="btn btn-secondary btn-sm ks4" onclick="location.href='#'">바로가기</button>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div><!-- ./col -->
<div class="col-lg-3 col-md-3 col-sm-12 col-12">
<div class="box">
<div class="icon">
<div class="info-pink">
<span class="material-icons">logout</span>
<p class="ks4 f14 h75">
갤럭시 시리즈의 모든 기종에서도 문제 없이 최적화된 사이트로 적용됩니다.
</p>
<div class="margin-top-20 margin-bottom-20">
<button type="button" class="btn btn-secondary btn-sm ks4" onclick="location.href='#'">바로가기</button>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div><!-- ./col -->
답변 1
.box > .icon {
background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20190223/ourmid/pngtree-blue-ocean-deep-sea-background-pattern-material-seabackgroundseawaterwater-surface-image_68068.jpg);
text-align: center;
position: relative;
}
답변 감사합니다.
위 소스를 CSS에 넣으면 되는거죠? 기존거는 삭제하구요??
.box > .icon { text-align: center; position: relative; }
위 부분에
background-image ...
라인만 추가하면 됩니다.
근데 .box > .icon { text-align: center; position: relative; } 이부분이 중복으로 있는데
두번째 정의된 부분은 삭제하시면 되구요
답변을 작성하시기 전에 로그인 해주세요.
