background-img(배경이미지)

요렇게 됨

background-img: url("../img/강아지귀여웡.jpg");

강아지귀여웡.jpg 이 다른 폴더에 있기 때문에 ..으로 타고 올라가서 강아지 귀여웡을 찾는다

만약 background-repeat: repeat; 를 하게 된다면?

이렇게 반복적으로 채워진다

직접 사진의 크기를 정해줄 수 있는데

background-size: (가로길이) (세로길이); 로 정해줄 수있다

그럼 정해진대로 이렇게 나온다

즉

background-image: url("../img/강아지귀여웡.jpg");
background-repeat: (no-repeat 반복하지 않는다 repeat 반복한다)

background-size: (가로길이) (세로길이);

 

아참 그리고 background-size에 100%를 하면 꽉 채워진다 ㅎㅎ

귀여운 댕댕이가 찌그러져 버렸다

 

꿀팁 항상 꽉 채우면서 찌그러지지 않는 방법!!

background-size: cover;

background-size: cover; 는 배경을 꽉채우면서도 비율을 유지시키겠다는 이야기이다

댕댕이 사진이 너무 큰나머지 높이가 맞지 않는고만

 

background-position:right bottom; 

right는 가로로 페이지를 줄였을때 최대한 오른쪽으로 치우치게 하는 것

bottom은 세로로 페이지를 줄였을때 최대한 아래쪽으로 치우치게 하는 것

center 가운데로 치우치게함

/* 원래 이미지 사이즈대로 출력 */

background-size: auto;

/* 화면을 꽉 채우면서, 사진 비율을 유지 */

background-size: cover;

/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */

background-size: contain;

/* 픽셀값 지정 (가로: 30px, 세로: 50px로 설정) */

background-size: 30px 50px;

/* 퍼센트값 지정 (가로: 부모 요소 width의 60%, 세로: 부모 요소 height의 70%로 설정) */

background-size: 60% 70%;

 

 

/* 반복하지 않음 */

background-repeat: no-repeat;

/*가로 방향으로만 반복 */

background-repeat: repeat-x;

/*세로 방향으로만 반복 */

background-repeat: repeat-y;

/*가로와 세로 모두 반복 */

background-repeat: repeat;

/*반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */

background-repeat: space;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */

background-repeat: round;

 

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */ /* 아래와 같은 총 9개의 조합이 가능 */ background-position: left top;

background-position: left center;

background-position: left bottom;

background-position: right top;

background-position: right center;

background-position: right bottom;

background-position: center top;

background-position: center center;

background-position: center bottom;

/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */

background-position: 25% 75%;

/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */

background-position: 100px 200px;