[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션
background-repeat
- 배경 이미지의 반복을 설정
- 속성 값
- repeat : 배경 이미지를 수직, 수평으로 반복 (기본값)
- repeat-x : 배경 이미지를 수평으로 반복
- repeat-y : 배경 이미지를 수직으로 반복
- no-repeat : 반복 없음
div {
background-image: url(/image.jpg);
background-repeat: no-repeat; /* 반복 수행 X */
}
background-position
- 배경 이미지의 위치를 설정
- 속성 값
- % : 왼쪽 상단 모서리는 0%, 0%, 오른쪽 하단 모서리는 100%, 100% (기본값 : 0%, 0%)
- 방향 : 뱡향을 입력하여 위치 설정
- top, bottom, left, right, center
- 단위 : px, em, cm 등 단위로 지정
사용법
- 값이 방향일 경우
background-position: 방향1 방향2;
/* 순서를 바꿔도 된다 */
background-position: 방향2 방향1;
/* center 일 경우 한번만 써도 됨 */
background-position: center;
- 값이 단위 (%, px 등) 일 경우
background-position: x축 y축;
- 동시에 사용
/* 순서를 바꾸면 안됨 */
background-position: 50px bottom
background-position: left 50px
background-attachment
- 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정
- 속성 값
- scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨 (기본값)
- fixed : 배경 이미지가 뷰포트(Viewport)에 고정되여, 요소와 같이 스크롤되지 않음
- local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨
background-attachment: fixed
background-attachment: local
<div class="container">
<div class="for-scroll"></div>
</div>
.container {
width: 400px;
height: 500px;
background-image: url("...");
background-attachment: local;
}
.for-scroll {
height: 200px;
}
프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM
Author And Source
이 문제에 관하여([패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ji-yeong/패스트캠퍼스-수강-후기-프론트엔드-인강-100-환급-챌린지-27회차-미션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)