Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

블로그

CSS 배경(Background) 본문

CSS

CSS 배경(Background)

오구리 2020. 5. 17. 01:12

 

배경에 관한 속성은 배경색, 배경 이미지, 배경 반복 여부 ,배경위치, 배경 고정 여부 등이 있으며 이 모든 속성을 한 줄로 표기할 수도 있어야 한다.

속성 풀이
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

결과화면▼

'CSS' 카테고리의 다른 글

CSS display속성 - 화면 배치 방법 결정하기  (0) 2020.05.22
CSS 레이아웃(float,clear,overflow속성)  (0) 2020.05.22
CSS 표스타일(vertical-align속성)  (0) 2020.05.17
CSS 선택자(Selector)  (0) 2020.05.17
CSS 포지션(Position)  (0) 2020.05.17
'CSS' Related Articles more