무료폰트 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] background-color, background-image 태그를 이용한 배경 스타일 설정법

2018.05.02
배경 스타일을 위한 속성

background-color
배경색을 채웁니다. 정의한 색상으로 border와 padding을 포함한 영역을 채웁니다. margin영역은 제외

-기본값 : transparent
- 상속 : no
- 에니메이션 : Yes
- 버젼 : CSS level 1

문법
background-color : transparent | color | initial | inherit

- transparent : 배경색이 없습니다.
- color : 색을 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모의 요소의 속성겂을 상속 받습니다.






background-color: 배경색을 지정 (yellow, #FFFF80, Ivory)
<div style="height:50px; background-color: #FFFFF0">ivory배경색이 지정된 예제</div>


background-image: 배경 이미지를 지정할 수 있습니다. url(bg.gif)
<div style="width:250; height:250; background-image: url(bg.gif)"></div>


background-repeat: 배경 이미지의 반복 여부르리 지정. repeat, repeat-x, repeat-y, no-repeat
background-repeat: 배열 방법
repeat : 가로/세로로 타일처럼 반복.
repeat-x : 왼쪽 위부터 가로 방향으로만 반복.
repeat-y : 왼쪽 위부터 세로 방향으로만 반복.
no-repeat : 반복하지 않고 한번만 나타냄.

background-position: 배경 이미지의 위치 지정.( top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right)
<div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:no-repeat"></div>


배경이미지를 고정시킵니다.
background-attachment : 고정 여부

** 고정여부
fixed : 배경 이미지 위치를 고정시킨다.
scroll: 배경 이미지를 다른 내용과 함께 스크롤한다.


** 배경고정
.bg{position: fixed;width: 100%;height: 100%;background-image: url(images/gs_gatebg.jpg);background-size:cover; background-position: center top;} 브라우져에 크기에 따라 이미지 크기변동


** 배경이미지를 좌표로 불러오는 방법
- background-color: #fff;
- background-image: url(bg.png);
- background-repeat: no-repeat;
- background-position: 50px 50px;

위 속성들을 아래와 같이 한줄로 작성 (속기법)
background: #fff url(bg.png) no-repeat 50px 50px;




출처
background-color :
https://www.codingfactory.net/10588

이 포스트 공유하기

글수정  글삭제 전체목록