Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Tags
- 프로토콜이란
- 서버 뜻
- 코드펜 복사해도 안되는 이유
- 반응형 정사각형
- 터미널 명령어
- angular 터미널
- ck editor 사진 넣는법
- 에디터 사용법
- 에디터 api
- 코드펜 옮겨오는 법
- CK Editor
- 반응형 웹
- 서버란 무엇인가
- ck editor 이미지 업로드
- 서버의 의미
- 정보처리기능사 따는법
- 앵귤러 터미널 명령어
- 코드펜
- 정보처리기능사 준비
- 정보처리기능사 필기 준비
- 앵귤러 명령어
- 터미널에서 angular project 생성
- 프로토콜 뜻
- 정보처리기능사
- 무료 에디터 사용법
- 코드펜 안되는 이유
- 정보처리기능사 필기
- 프론트엔드 용어
- 글 에디터 넣는법
- ck editor 사진
Archives
- Today
- Total
멋진 개발자가 되고 싶어
[css] 동영상을 background-image처럼 넣는 방법 본문
See the Pen Untitled by bbungbbun (@bbungbbun) on CodePen.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
background-size: cover / contain은 사진이나 gif만 적용된다.
하지만 이런 기능을 영상에도 적용하고 싶을 때가 분명 존재한다.
그럴 때는 어떻게 해야하는가?
결론!
적용하고 싶은 영상에
object-fit : cover / contain으로 적용하면 된다!
와우~
자세한 건 codepen에 있는 코드를 뜯어보도록!
https://alvarotrigo.com/blog/background-video-css/
How to create a video background with CSS [2022]
We show you in this tutorial how to set a video as a background using just CSS and HTML.
alvarotrigo.com
이 문서는 위의 링크를 참고하였습니다.
'CODE > css' 카테고리의 다른 글
| [css] 반응형 정사각형 만들기 (0) | 2022.12.07 |
|---|---|
| [css] 반응형 태그 표시 (태그가 잘리지 않게 표시) (0) | 2022.12.01 |
Comments