css background: url(../)no-repeat

 

배경 써야할 경우
1	레이아웃크기보다 큰 이미지 사용시	(단, 데이터로 들어오는 클릭되는 이미지일경우 img로 넣는경우가 많음)
2	내용을 꾸미는 이미지(아이콘)
3	반복이미지
4	:hover로 이미지나 배경위치 변경
5	sprite image 사용시
6	fixed배경 사용시	(사용자제, 모바일에서 안됨)
7	투명배경 사용시
8	배경이미지를 요소에 가득채울때(full배경)
속성값
속성	background:색 url(../images/파일명.확장자) no-repeat x y위치 / cover(크기)	(fixed 모바일 적용안됨 사용X)
예시	background: yellowgreen url(../images/ci-shinhan-pc.png) no-repeat right 100px bottom 100px / 120px;
offset	background offset (right, bottom 지정 ): 배경을 오른쪽 아래를 기준으로 안으로 넣어줌 (단어만 가능)  배경 offset 사용시 단어로 기준잡고 숫자 추가 offset 설정시 % 사용X
예시	background:#fff url(../images/company.svg) no-repeat right 25px bottom 25px;

느낌표 변경 예시 background: #f6f6f6 url(../images/icon_exc.png) no-repeat right 25px center;

 

*css로 이미지를 변경할 수 있는 방법은 없음

* 클릭하는 이미지 즉 img (로고/이벤트 배너) 크기가 정해져 있는 이미지는 <img>로 태그

* 배경사용시 요소가 아니므로 배경들어갈 요소의 크기 설정

* 배경사용시 중앙정렬을 쉽게 할 수 있음

 

 

 

---

배경효과 적용 예시 바로가기 

 

https://hyojinny.tistory.com/68

CSS 공통클래스 [class^=] & background 아이콘 공통 변경

 

2. 내용을 꾸미는 이미지(아이콘)
3. 반복이미지
4. :hover로 이미지나 배경위치 바꿀때
5. sprite image 사용시