배경 이미지 사용법

*배경
-border부터 배경이 깔림, 포함된 영역이기때문(만약 도트선이면 아래에도 색칠해져있음)
-margin은 안깔림, padding은 깔림

 

*background-color: 배경색 지정

-16진수#000..., rgb(0,255,0), rgba, 색상이름

 

*백그라운드로 이미지깔고 조정하기
background-image:url(down/image/ball.png);
-이미지깔리는게 패딩부터 디폴트

-괄호안에 'img.png'이렇게 따옴표 붙여도 되고 안 붙여도 됨

*background-repeat 배경이미지 반복 조정

-repeat; repeat-x(가로), repeat-y(세로), no-repeat 로 조정

*배경어디부터 깔지 정하기
background-clip:padding-box;/*선포함x 그 안에 패딩부터 배경깔림*/
background-clip:border-box;/*선포함부터 배경깔림*/
background-clip:content-box;/*콘텐츠부터 배경깔림*/

*배경이미지 배치할 때 기준
background-origin: content-box; 
                          border-box; 
                          padding-box;

*배경이미지 위치 조절하기
background-position

-수평위치, 수직위치

-수평위치 표현할때: left, center, right, %, px

-수직위치 표현할때:top, center, bottom,%, px
ex)background-position:right 10px left 20px; >>오른쪽에서 10px 떨어지고 left에서 20px떨어지란뜻
ex)background-position:10px 20px; >좌우10px, 상하 20px 떨어지란뜻

*배경이미지 크기 조절
background-size:auto
contain (요소 영역안에 배경이미지가 다 채워짐)
cover(이미지가 요소 영역을 덮게 함/이미지가 영역 넘어가면 짤림)
크기값
백분율

*배경이미지 고정하기
배경 이미지 넣고>background-attachment:fixed;

-scroll:기본값, 화면스크롤과 함께 배경이미지도 스크롤

*배경이미지 축약

-축약순서: color image repeat positon / size attachment
ex)background: url(down/image/ball.png) no-repeat right bottom /cover; >>축약할때는 순서를 준수해야 적용됨

-축약할때 position(cover), size는 밑에처럼 /붙여야 적용됨

ex)background:url(d.img) no-repeat center /cover;  >o
ex)background:url(d.img) no-repeat center / 50px;  >o

 

*배경이미지 여러개 중첩 사용

div{background-image:url(img/image1.png), url(img/image2.png);

background-size:200px 100px, 500px 100px;

background-position:100px 10px ,0 0;

background-repeat:no-repeat;}

1. background-image 뒤에 적용할 url 주소를 ,로 구분하여 넣고자 하는 만큼 입력

2. background-size : ,로 구분 각 이미지의 크기를 조절

3. background-position :  (왼쪽 위 기준) ,로 구분하여 각 이미지의 위치를 조절

(이미지가 겹칠경우엔 왼쪽 파일이 앞쪽에 적용)

 

 

*배경 그라디언트와 이미지 같이 사용

 

div{background : linear-gradient(to right, rgba(0, 0, 0, .6), rgba(255, 255, 255, .6)), url(img/image.jpg);}

 

*배경 이미지와 컬러 같이 사용

div{background :url(img/image.jpg)no-repeat top center #cccccc;}

 

*배경 이미지와 컬러 혼합

div{background : url(image.jpg)no-repeat top center;
 background-color: aliceblue;
background-blend-mode: multiply;}