[HTML/CSS] 배경화면에 영상 넣기

2024. 6. 30. 12:54·FrontEnd/CSS
	<div class="bg-video">
  		<video class="bg-video__content" autoplay muted loop>
   		 <source src="${pageContext.request.contextPath}/resources/images/login_bg_video.mp4" type="video/mp4" />
  		</video>
	</div>
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.15;
}

.bg-video__content {
  height: 100%;
  width: 100%;
  object-fit: cover; // background-size: cover 와 비슷함. (HTML 요소 or 비디오와 작동)
  
}

'FrontEnd > CSS' 카테고리의 다른 글

[CSS]Google 클론코딩  (0) 2024.05.29
[CSS]웹페이지 메인화면 클론코딩  (0) 2024.05.11
'FrontEnd/CSS' 카테고리의 다른 글
  • [CSS]Google 클론코딩
  • [CSS]웹페이지 메인화면 클론코딩
방카킴
방카킴
김행원의 개발 블로그
  • 방카킴
    방카@Dev
    방카킴
  • 전체
    오늘
    어제
    • 분류 전체보기 (46)
      • Notice (2)
      • FrontEnd (5)
        • Javascript (1)
        • CSS (3)
      • BackEnd (25)
        • Java (1)
        • JSP (4)
        • Spring (19)
        • DB (1)
      • Git (1)
      • AI (8)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    AI
    LLM
    북리뷰
    agenticai
    Agent
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
방카킴
[HTML/CSS] 배경화면에 영상 넣기
상단으로

티스토리툴바