티스토리 배경화면만 투명하게 하기!

Content 부분만 은은한 배경화면 구성을 해봤읍니다.

마음에 쏙 드는 돌하르방 배경화면

 

블로그관리 > 스킨편집 > html 편집

위 순서로 접근 하신 후 '파일업로드 > + 추가' 버튼을 눌러 원하는 배경화면을 추가해줍니다.

감귤과 돌하르방이 역동적인 이미지를 사용할겁니다 (thx to DELTA)

 

그 다음 파일업로드 옆 'CSS'을 선택하여 Ctrl + F로 'content-inner' 검색을해보면 Content관련된 클래스가 있으며 아래처럼 수정을 해주면 배경화면이 반영됩니다.

/*
 * content
 */
#content { margin: 0 0 0 330px; padding: 0; }
#content-inner { max-width: 1030px; width: 100%; padding-right: 30px; 
	 position: relative;
}

#content-inner::before {    
  background-color: #ffffff;
	content: "";
	background-image: url(https://tistory2.daumcdn.net/tistory/4854076/skin/images/header_new222.png);
        opacity: 0.1;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
}

#content-inner::befor 을 생성하여 배경화면에 투명값(Opacity)를 넣을 경우 텍스트 포함한 전체가 투명해지기 때문에 'before'라는 가상박스를 활용하여 투명해지는 부분을 분리하였습니다.

(참고 : https://ddorang-d.tistory.com/89)