SIR
목록으로

배경이미지를 처리하고 있습니다. 채택완료

디자인아루즈
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 1,803
답변 1
목록

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

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

https://cheongbo21.cafe24.com/

Copy 
/*메인 공지 최신글*/
.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개

채택된 답변
+20 포인트

Copy 
/* 메인 공지 최신 게시물 컨테이너 */
.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'를 실제 이미지 경로로 교체하십시오.

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고