배경이미지를 처리하고 있습니다.
본문
이미지만 나오게 수정하려하는데 좀 어렵네요
그리고 높이를 일정하게 하고 싶습니다.
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'를 실제 이미지 경로로 교체하십시오.
이 수정은 배경 이미지의 높이를 일정하게 유지하고 이미지만 표시할 수 있도록 합니다.
답변을 작성하시기 전에 로그인 해주세요.
