728x90
CSS 배경 색상 및 이미지 제어하기
1) background-color
2) background-clip
3) background-image('경로')
4) background-repeat
- repeat
- repeat-x
- repeat-y
- no-repeat
5) background-size: 배경이미지 크기 조절
- auto: 원래크기
- contain: container에 맞는 크기
- cover: ★자주사용됨
- px, % (50%, 50%) (width 반토막, height 반토막) ★자주사용됨
6) background-position: cetner center;
- top, bottom, left, right, cetner
7) background-attachment: fixed;
- scroll 시에 배경고정
ex1) css-background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>배경색상 제어하기</title>
<style>
body {
background-image:url(images/background-image.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>ex2) css-backgroundsize
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경이미지 채우기</title>
<style>
div {
border: 1px solid black;
width: 800px;
height: 600px;
background-image: url(images/background-size.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>ex3) Css-BackgroundPosition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>배경이미지 위치시키기</title>
<style>
div {
border: 1px solid black;
width: 800px;
height: 600px;
background-image: url(images/landing-img-new.png);
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>ex4) background-attachment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>배경이미지 고정하기</title>
<style>
body {
background-image: url(images/backgound-attachment.png);
background-repeat: no-repeat;
background-position: bottom center;
background-attachment: fixed;
}
p {
font-size: 50px;
}
</style>
</head>
<body>
<h1>
배경이미지 고정하기
</h1>
<p>
attachment: fixed 사용하기
</p>
<p>
백그라운드 고정하기
</p>
</body>
</html>반응형
'2019백업' 카테고리의 다른 글
| 8. 박스모델 (border, margin, padding) (0) | 2019.07.22 |
|---|---|
| 7. 레이아웃 스타일 (Block elements & Inline elements) (0) | 2019.07.22 |
| 5. CSS 목록 스타일 (0) | 2019.07.22 |
| 4. CSS Text (0) | 2019.07.22 |
| 3. 브라우저 벤더프리픽스 (0) | 2019.07.22 |
