CSS background 속성은 페이지에서 요소의 배경 색상을 컨트롤하고, 배경에 이미지를 지정하고, 배경 이미지를 세로나 가로로 반복하고, 이미지 위치를 지정하는 것을 허용한다.
1. CSS background-color Property
background-color 속성은 요소의 배경색상을 지정한다.
(상속불가)
Values
color : 색상값은 색상이름(red), RGB값(rgb(255,0,0)), 16진수(#ff0000) 등이 될 수 있다.
transparent : 배경색상이 투명해진다.
2. CSS background-image Property
background-image 속성은 배경에 이미지를 지정한다.
(상속불가)
Values
url : 이미지 경로
none : 배경 이미지 없음
3. CSS background-attachment Property
background-attachment 속성은 배경이미지가 페이지에 고정되는지 스크롤되는지를 지정
(상속불가)
Values
scroll : 페이지가 스크롤될 때 배경이미지가 이동한다.
fixed : 페이지가 스크롤될 때 배경이미지가 이동하지 않는다.
4. CSS background-repeat Property
background-repeat 속성은 배경이미지가 어떻게 반복될 것인지를 지정한다.
(상속불가)
Values
repeat : 배경 이미지는 세로와 가로가 반복될 것이다.
repeat-x : 배경 이미지는 가로로 반복될 것이다.
repeat-y : 배경 이미지는 세로로 반복될 것이다.
no-repeat : 배경이미지는 한번만 출력될 것이다.
5. CSS background-position Property
background-position 속성은 배경이미지의 시작위치를 지정한다.
(상속불가)
Values
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right
: 하나의 키워드만을 사용하면, 두번째 값은 "center"가 될 것이다.
x-% y-% : 첫번째 값은 가로위치, 두번째 값은 세로위치이다. top left 는 0% 0% 이고, right bottom 은 100% 100% 이다. 하나의 값만 지정한다면 다른값은 50%가 될 것이다.
x-pos y-pos : 첫번째 값은 가로위치, 두번째 값은 세로위치이다. top left 는 0 0이다. 단위는 다른 CSS의 단위나 픽셀(0px 0px)이 될 수 있다.
하나의 값만 지정한다면 다른 값은 50%가 될 것이다. 위치와 %를 혼용할 수 있다.
1. CSS background-color Property
background-color 속성은 요소의 배경색상을 지정한다.
(상속불가)
p
{
background-color: #00ff00
}
{
background-color: #00ff00
}
Values
color : 색상값은 색상이름(red), RGB값(rgb(255,0,0)), 16진수(#ff0000) 등이 될 수 있다.
transparent : 배경색상이 투명해진다.
<!-- 요소의 배경색상 지정 -->
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is paragraph</p>
</body>
</html>
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is paragraph</p>
</body>
</html>
2. CSS background-image Property
background-image 속성은 배경에 이미지를 지정한다.
(상속불가)
body
{
background-image: url(stars.gif);
background-color: #000000
}
{
background-image: url(stars.gif);
background-color: #000000
}
Values
url : 이미지 경로
none : 배경 이미지 없음
<!-- 문서에 배경이미지 지정 -->
<html>
<head>
<style type="text/css">
body {background-image: url('star.gif')}
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<style type="text/css">
body {background-image: url('star.gif')}
</style>
</head>
<body>
</body>
</html>
3. CSS background-attachment Property
background-attachment 속성은 배경이미지가 페이지에 고정되는지 스크롤되는지를 지정
(상속불가)
body
{
background-image: url(stars.gif);
background-attachment: scroll
}
{
background-image: url(stars.gif);
background-attachment: scroll
}
Values
scroll : 페이지가 스크롤될 때 배경이미지가 이동한다.
fixed : 페이지가 스크롤될 때 배경이미지가 이동하지 않는다.
<!-- 스크롤에도 움직이지 않는 반복없는 배경이미지 지정 -->
<html>
<head>
<style type="text/css">
body {
background-image: url('star.gif');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed
}
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background-image: url('star.gif');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed
}
</style>
</head>
<body>
</body>
</html>
4. CSS background-repeat Property
background-repeat 속성은 배경이미지가 어떻게 반복될 것인지를 지정한다.
(상속불가)
body
{
background-image: url(stars.gif);
background-repeat: repeat-x
}
{
background-image: url(stars.gif);
background-repeat: repeat-x
}
Values
repeat : 배경 이미지는 세로와 가로가 반복될 것이다.
repeat-x : 배경 이미지는 가로로 반복될 것이다.
repeat-y : 배경 이미지는 세로로 반복될 것이다.
no-repeat : 배경이미지는 한번만 출력될 것이다.
<!-- 문서에 세로 반복 배경이미지 지정 -->
<html>
<head>
<style type="text/css">
body {
background-image: url('star.gif');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background-image: url('star.gif');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
5. CSS background-position Property
background-position 속성은 배경이미지의 시작위치를 지정한다.
(상속불가)
body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: top left
}
body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: 0% 0%
}
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: top left
}
body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: 0% 0%
}
Values
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right
: 하나의 키워드만을 사용하면, 두번째 값은 "center"가 될 것이다.
x-% y-% : 첫번째 값은 가로위치, 두번째 값은 세로위치이다. top left 는 0% 0% 이고, right bottom 은 100% 100% 이다. 하나의 값만 지정한다면 다른값은 50%가 될 것이다.
x-pos y-pos : 첫번째 값은 가로위치, 두번째 값은 세로위치이다. top left 는 0 0이다. 단위는 다른 CSS의 단위나 픽셀(0px 0px)이 될 수 있다.
하나의 값만 지정한다면 다른 값은 50%가 될 것이다. 위치와 %를 혼용할 수 있다.
<!-- 문서의 중앙위치에 반복없는 배경이미지 지정 -->
<html>
<head>
<style type="text/css">
body {
background-image: url('star.gif');
background-repeat: no-repeat;
background-position: center
}
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
background-image: url('star.gif');
background-repeat: no-repeat;
background-position: center
}
</style>
</head>
<body>
</body>
</html>
WRITTEN BY
- 손가락귀신
정신 못차리면, 벌 받는다.
,
