백그라운드 사진이 짤리지 않고 꽉차게 그위에 글자넣기
본문
div class를 img 로 잡고 css 의 .img에서 background로 이미지를 불러왔습니다
그위에 div class를 content로 잡고 두줄의 문장을 작성하였는데
브라우저 크기가 작을땐 사진의 모든모습이보이지만 브라우저 크기가 커지면 사진이 짤려서 출력됩니다
백그라운드의 사진이 잘리지않고 그위에 글자를 표현할 수 있나요?
html 소스
<div class="img">
<div class="content">
<h1>a1</h1>
<h1>a2</h1>
</div>
<div class="img-cover"></div>
</div>
css소스
.img{
position: relative;
background-image: url(main.png);
max-width: 100%;
height: 70vh;
background-size: cover;
background-repeat:no-repeat;
}
.img .content{
position: relative;
top:50%;
left:50%;
transform: translate(-45%, -50%);
letter-spacing :1px;
word-spacing:5px;
font-size:1.3rem;
font-family:'Nanum Pen Script', cursive;
color: white;
z-index: 2;
text-align: left;
}
답변 2
전에 주셧던 질문과 동일한 방법입니다.
.img {
position: relative;
background-image:url(main.png);
max-width: 100%;
height: 70vh;
background-size: cover;
background-repeat:no-repeat;
}
.img .content{
position:absolute;
top:50%;
left:50%;
tansform:translate(-45% , -50% );
letter-spacing: 1px;
word-spacing: 5px ;
font -size : 1.3rem
font-family:'Nanum Pen Script', cursive;
color: white;
z-index: 2; << 삭제
text-align: left;
}
position : relative 는
별도의 top left 값으로 조절하면 안됩니다.
absolute 가 relative 부모위로 위치가 잡히므로 자동으로 텍스트가 백그라운드 위로 위치 할 것입니다.
그러므로 z-index는 별도로 안부여해도 되겠습니다.
감사합니다^^
보기로는 사진이 잘릴거 같진 않은데,
.img div의 부모 div width 가 100% 가 아니라서 잘리는게 아닐까 싶어요!
아 혹시 사진의 위아래가 잘리는거 말씀이신지?..
해결하였습니다 감사합니다~
