[#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image

 

 

 

 

 

이미지 위에 텍스트를 올리고 싶은데

position: absolute는 쓰기 싫다

간단하게 이미지 위에 텍스트를 올려보자

 

 

① HTML

 

<div class="text-on-img">
  <div class="background-wrap">
    <div class="content">
      <span>Title</span>
      <span>Content</span>
    </div>
  </div>
</div>

 

 

 

② CSS

 

.background-wrap {
  background-image: url('https://image.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg');
  background-size: 272px 196px;
  width: 272px;
  height: 196px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
}

.content span {
  color: white;
}

.content span:nth-child(1) {
  font-size: 25px;
  font-weight: bold;
}

.content span:nth-child(2) {
  font-size: 20px;
}

 

 

 

 

이렇게 잘 올라간다

 

 

 

 

 

 

 

앞으로 html, css, js 관련 코드는 이렇게 코드펜으로 가져와야겠다

 

See the Pen text on image by shab8 (@shab8) on CodePen.

 

 

 

 

 

CodePen 사용법은 아래 글에 써놨다

developer0809.tistory.com/57

[#. CodePen] HTML, CSS, JS 코드와 화면을 동시에 볼 수 있는 코드펜 티스토리에 가져와서 사용하기