본문 바로가기
성동스터디 (2021.09.09 ~ ing)/Spring

[Spring][Thymeleaf] background-image 사용하기

by juniKang 2021. 12. 28.

헤더에 배경화면을 넣어주는 css가 있다. 만약 타임리프에서 저 url을 찾고자 하면 찾을 수 없다.

    header.masthead {
      padding-top: 10.5rem;
      padding-bottom: 6rem;
      text-align: center;
      color: #fff;
      background-image: url("/static/images/airpodsMain.jpg");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: center center;
      background-size: cover;
    }

 

타임리프가 찾을 url을 th:style속성으로 html에서 적어줄 수 있다.

  <header class="masthead" th:style=" 'background-image: url(/images/airpodsMain.jpg)' ">
    <div class="container">
      <div class="masthead-subheading">Welcome To Angel Pods!</div>
      <div class="masthead-heading lh-sm">기기를 등록하고<br>분실에 대비하세요!</div>
      <a class="btn btn-primary btn-xl " href="device/add_view.jsp">등록하기</a>
    </div>
  </header>

 

참고 : https://stackoverflow.com/questions/35789526/how-to-set-background-url-for-css-files-in-thymeleaf

댓글