[square] 배경 이미지 등록하는 방법

Square 스킨에 배경 이미지를 넣는 방법입니다.

:after 라는 CSS 소스를 사용한 방법이라 IE7 에선 작동하지 않습니다.

style.css 파일 편집

style.css 파일 상단을 보면

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/
@import url("./images/NotoSansKR-Hestia.css");

html { font-size: 62.5%; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; }
html, body { margin: 0; padding: 0; background-color: #f1f1f1; overflow-x: hidden; }

이런 소스가 있습니다.

빨갛게 표시한 background-color: #f1f1f1; 속성은 삭제해주세요.

그 바로 다음줄에 아래 소스를 추가해 사용하면 됩니다.

body:after {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	background-image: url("https://t1.daumcdn.net/cfile/tistory/22746F4255B23D8934");
	background-size: cover;
	background-position: center center;
	background-color: #f1f1f1;
	z-index: -1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */
	opacity: 0.5;
}

파랗게 표시한 부분에 원하는 배경 이미지 주소를 넣고, 빨갛게 표시한 부분에서 배경의 투명도를 지정하면 됩니다. (숫자가 0에 가까워질수록 투명해집니다)