배경에 이미지에 관련된 속성
배경 지정
– 배경에 색상을 지정할 뿐만 아니라 이미지 삽입 가능
– 배경 이미지 설정
• “background-image” 속성
• 삽입할 이미지의 파일명을 기술하려면 “url”을 기술하여 지정
selector {
background-image:url(“경로명+파일명”)
}
– 타일 효과
• “background-repeat” 속성
• 기본값 repeat 설정 바둑판모양으로 출력
• no-repeat : 배경 이미지 반복하지 않고 한번만 출력
배경 이미지의 위치 조정 속성
배경 이미지 위치 조정
– background-position 속성
• 비율로 위치를 지정 또는 키워드로 설정
• 특정 위치를 지정하지 않으면 기본적으로 왼쪽 상단에 위치
selector{
Background-position:속성값
}
• 왼쪽 상단을 [0%, 0%]=left top
• 오른쪽 하단[100%, 100%]=right bottom
• 중앙[50%, 50%]=center center
배경 이미지 고정하는 속성
• 배경 이미지 고정
– background-attachment 속성
• 속성값을 “fixed”로 지정
• 배경 이미지 고정, 내용만 스크롤
selector{
Background-attachment:속성값
}
– 배경 스타일 한번에 설정
• 배경에 관련된 속성 한번에 지정
• background 속성 다음에 적용하고자 하는 속성들에 대한 값들 나열
selector{
color:white;
background:black url(“image\image01.jpg”) center no-repeat
fixed;
}
'HTML.CSS.JavaScript > 수업' 카테고리의 다른 글
| 30. 자바스크립트 실행 방법(10-3) (0) | 2017.06.26 |
|---|---|
| 29. 자바스크립트(10-2) (0) | 2017.06.26 |
| 27. CSS(9-3) (0) | 2017.06.15 |
| 26. CSS(9-2) (0) | 2017.06.14 |
| 25. 웹페이지 작성(9-1) (0) | 2017.06.14 |
