background-size 속성

오늘 적용 했다.

PC화면과 모바일 화면의 헤더 배경 이미지가 다르게 보여서 방법을 찾아 적용해 봤다.

 

 

사용 예문

background-size:200px 500px;

배경 이미지크기를 절대크기로 설정. (가로 200px, 세로 500px)

background-size:20% 50%;

배경 이미지를 상대크기로 설정. (가로 20%, 세로 50%)

 

background-size:contain;

배경 이미지의 가로, 세로 길이 모두 엘리먼트 안에 들어온다라는 조건하에 가능한한 배경 이미지를 가로/세로 비율을 유지한채로 크게 조정. 

현재 헤더_header 부분의 이미지 부분...

 

background-size:cover;

배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다는 조건하에 가능한한 배경 이미지를 가로/세로 비율을 유지한채로 작게 조정.

 

 

background-size_소스(css)

/* Tistory _ PC */ #header { overflow:hidden; position:relative; z-index:1240; width:100%; height:245px; background:url(./images/2016.png) center top no-repeat; padding:0; margin:0; } /* Tistory _ Mobile */ #header { overflow:hidden; position:relative; z-index:1240; width:100%; height:auto; background:url(./images/2016.png) center top no-repeat; background-size:cover; padding:0; margin:0; } /* Tistory h1 _ Mobile */ #header h1 { margin:0; text-align:center; } #header h1 a { text-align:right; margin:0; padding:auto; /* 필히 'auto'로 지정 */ font-family:Georgia, "Times New Roman", sans-serif; color:transparen; font-weight:normal; letter-spacing:-521px; /* 글자를 보이지 않게 한다 */ } #header h1 a:hover { color:#90b633; text-decoration:none; }

수정 : 2016년 01월 03일