728x90
CSS IMAGE[background]
hello CSS
- 배경 관련 속성
| 속성 | 설명 | 속성값 |
|---|---|---|
| background-color | 배경색 | 색상명, RGB혼합비, 시스템 색 |
| background-image | 배경 이미지의 경로/파일 지정 | none, url(“그림 파일명”) |
| background-repeat | 배경 이미지의 반복 여부 | repeat, no-repeat, repeat-x, repeat-y |
| background-attachment | 배경 이미지의 스크롤 여부 | fixed, scroll |
| background-position | 배경 이미지의 시작 위치 | 수치, %, top, center, bottom, left, right |
| background | 일괄 지정 | 속성값들을 순서에 상관없이 나열 |
.table1
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background-color:red;
border-color:blue;
} |
.table2
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background-image:
url("http://www.knou.ac.kr/images/main/t_bn00.gif");
border-color:blue;
} |
.table3
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background-image:
url("http://www.knou.ac.kr/images/main/t_bn00.gif");
background-repeat:no-repeat;
background-position:bottom right;
border-color:blue;
} |
.table4
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background-image:
url("http://www.knou.ac.kr/images/main/t_bn00.gif");
background-repeat:repeat-x;
border-color:blue;
} |
.table5
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background-image:
url("http://www.knou.ac.kr/images/main/t_bn00.gif");
background-repeat:repeat-y
background-position:center;
border-color:blue;
} |
.table6
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background:
url("http://www.knou.ac.kr/images/main/t_bn00.gif") no-repeat 50% center;
border-color:blue;
} | 일괄지정 |
.table6
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background:
url("http://www.knou.ac.kr/images/main/t_bn00.gif") fixed 50% center;
border-color:blue;
} | fixed |
.table6
{
width:100%;
border-width:1px;
border-collapse:collapse;
border-style:solid;
background:
url("http://www.knou.ac.kr/images/main/t_bn00.gif") scroll 50% center;
border-color:blue;
} | scroll |
'my_lesson > _CSS3' 카테고리의 다른 글
| CSS Box & Position[border,padding,margin,position] (0) | 2015.04.17 |
|---|---|
| CSS List[list-style-type,list-style-image,list-style-position] (0) | 2015.04.17 |
| CSS TEXT attribute [spacing,height,align,indent,decoration, transform] (0) | 2015.04.16 |
| CSS FONT attribute[family,size,style,weight,variant,color] (0) | 2015.04.16 |
| CSS list, padding, border, margin, a, position,curser (0) | 2015.04.09 |
댓글