CSS
CSS 배경(Background)
오구리
2020. 5. 17. 01:12
728x90
반응형
배경에 관한 속성은 배경색, 배경 이미지, 배경 반복 여부 ,배경위치, 배경 고정 여부 등이 있으며 이 모든 속성을 한 줄로 표기할 수도 있어야 한다.
| 속성 | 풀이 |
| background-color | 배경의 색상을 지정한다. |
| transparent - 투명 (생략하면 기본값으로 취급됨) | |
| #ff0000 - 배경을 빨간색으로. | |
| background-image | 배경으로 쓸 이미지를 지정한다. 예)url("images/bg.png") |
| background-repeat | 배경 이미지를 어떻게 반복시킬지 정한다. |
| repeat - 가로 세로로 반복.(생략하면 기본값으로 취급됨) | |
| no-repeat - 한번만 나옴. | |
| repeat-x - 가로로 반복함. | |
| repeat-y - 세로로 반복함. | |
| background-position | 배경 이미지의 위치를 정한다. |
| 가로위치 - left, right, center, pr값, %값, em값 | |
| 세로위치 - top, bottom, center, px값, %값, em값 | |
| 생략하면 - 각각 left,top이 기본값으로 취급됨 | |
| background-attachment | 배경 이미지를 고정시킬지 스크롤되게 할지 정한다. |
| scroll - 화면이 스크롤되면 따라감. (생략하면 기본값으로 취급됨) | |
| fixed - 배경의 위치가 화면 기준으로 고정됨. | |
| background | 위의 다섯 가지 속성을 한 줄로 표기한다. |
| ex) background:#fdd url("images/bg.png") no-repeat 50px 100px scroll; |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<style>
body{font:12px "굴림",Gulim;}
h1{background:url("bg_bul.jpg") no-repeat 0 50%; padding-left:20px;}
p{width:400px; padding:25px; background:#fef url("bg_line.png") repeat-x bottom;}
</style>
</head>
<body>
<h1>아침 식사와 저녁 식사</h1>
<p>하루일과를 잘 시작하여 성공적인 업무를 마치려면 아침 식사는 거르지 않는 것이 좋을 것이다.</p>
</body>
</html>
|
cs |
결과화면▼
반응형