백그라운드 사진이 짤리지 않고 꽉차게 그위에 글자넣기 채택완료
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는 별도로 안부여해도 되겠습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인