배경이미지를 처리하고 있습니다.

배경이미지를 처리하고 있습니다.

QA

배경이미지를 처리하고 있습니다.

본문

이미지만 나오게 수정하려하는데 좀 어렵네요

그리고 높이를 일정하게 하고 싶습니다.

https://cheongbo21.cafe24.com/


/*메인 공지 최신글*/
.tl_latest_box_warp { width:100%; max-width:100% margin:0 auto; padding:0px 20px 100px 20px; border-top:1px solid #ddd; clear:both; background:url(../img001.jpg) center top no-repeat; background-size:cover}
.tl_latest_box_warp .notice_latest { width:48%; float:left}
.tl_latest_box_warp .counsel_latest {width:48%; float:right}
@media screen and (max-width: 960px) {
    .tl_latest_box_warp .notice_latest { width:100%}
    .tl_latest_box_warp .counsel_latest { width:100%}
}
/*메인 공지 최신글*/

이 질문에 댓글 쓰기 :

답변 1


/* 메인 공지 최신 게시물 컨테이너 */
.tl_latest_box_warp {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0px 20px 100px 20px;
    border-top: 1px solid #ddd;
    clear: both;
    overflow: hidden; /* 요소 안쪽의 플로팅된 요소 주위로 컨테이너를 감싸기 위해 오버플로 속성 추가 */
}
/* 메인 공지 최신 게시물 배경 이미지 */
.tl_latest_box_warp::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img001.jpg') center top no-repeat;
    background-size: cover;
    z-index: -1; /* 다른 콘텐츠 뒤에 배경 이미지 위치시키기 */
}
/* 메인 공지 최신 게시물 콘텐츠 */
.tl_latest_box_warp .notice_latest,
.tl_latest_box_warp .counsel_latest {
    width: 48%;
    float: left;
    margin-bottom: 20px; /* 열 사이의 간격 조절 */
}
/* 반응형 스타일 */
@media screen and (max-width: 960px) {
    .tl_latest_box_warp .notice_latest,
    .tl_latest_box_warp .counsel_latest {
        width: 100%;
    }
}

.tl_latest_box_warp 컨테이너에 ::before 의사 요소를 추가하여 배경 이미지를 생성합니다.


overflow: hidden; 속성은 컨테이너가 내부의 플로팅된 요소 주위로 감싸지도록 합니다.


z-index: -1; 속성은 배경 이미지를 다른 콘텐츠 뒤에 배치합니다.


가독성을 높이기 위해 열 사이의 간격을 조절하기 위해 margin-bottom 속성을 조절하였습니다.


배경 이미지의 경로는 '../img001.jpg'를 실제 이미지 경로로 교체하십시오.

이 수정은 배경 이미지의 높이를 일정하게 유지하고 이미지만 표시할 수 있도록 합니다.
 

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

회원로그인

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