테스트 사이트 - 개발 중인 베타 버전입니다

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

디자인아루즈 1년 전 조회 1,617

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

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

https://cheongbo21.cafe24.com/

</p>

<p>/*메인 공지 최신글*/

.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%}

}

/*메인 공지 최신글*/</p>

<p>

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

답변 1개

채택된 답변
+20 포인트
그누위즈

</p>

<p>/* 메인 공지 최신 게시물 컨테이너 */

.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; /* 요소 안쪽의 플로팅된 요소 주위로 컨테이너를 감싸기 위해 오버플로 속성 추가 */

}</p>

<p>/* 메인 공지 최신 게시물 배경 이미지 */

.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; /* 다른 콘텐츠 뒤에 배경 이미지 위치시키기 */

}</p>

<p>/* 메인 공지 최신 게시물 콘텐츠 */

.tl_latest_box_warp .notice_latest,

.tl_latest_box_warp .counsel_latest {

    width: 48%;

    float: left;

    margin-bottom: 20px; /* 열 사이의 간격 조절 */

}</p>

<p>/* 반응형 스타일 */

@media screen and (max-width: 960px) {

    .tl_latest_box_warp .notice_latest,

    .tl_latest_box_warp .counsel_latest {

        width: 100%;

    }

}</p>

<p>

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

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

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

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

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

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

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

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

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

로그인