본문 바로가기
💻 1. 웹개발_Front end/1-3 CSS

[CSS] 03-2 배경 색과 배경 이미지

by 달님🌙 2021. 9. 5.
반응형

 

1. background-color 속성 – 배경 색 지정하기 

 

① 배경 색을 넣을 요소에 배경 색을 지정할 때 사용

② 기본형 : background-color : <색상>

③ 종류 : 

④ 배경색은 상속되지 않음.

 

<예제 – bg-color-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 트랜스폼</title>
    <style>
        body {
            background-color: #0094ff;
        }
        div {
            background-color: white;
            width: 90%;
            padding: 15px;
            border: 1px solid black;
        }
        p {
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <h1>세계 3대 미항</h1>
        <h2>세계 3대 미항</h2>
        <p>시드니(Sydney), 호주</p>
        <p>리우데자네이루(Rio de Janeiro), 브라질</p>
        <p>나폴리(naples), 이탈리아</p>
    </div>
</body>
</html>

 

2. background-clip 속성 – 배경 적용 범위 조절하기

 

① 배경을 어디까지 적용할지 지정

② 기본형 : background-clip 속성 - 배경 적용 범위 조절하기

③ 사용 가능한 속성 값

 

<예제 – bg-clip-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>줄간격 조절</title>
    <style>
        div {
            width: 300px;
            padding: 35px;
            border: 5px dotted #222;
            background-color: skyblue;
            margin-bottom: 20px;
            margin-right: 50px;
            display: block;
            float: left;
        }
        .bg1 {
            background-clip: border-box;
        }
        .bg2 {
            background-clip: padding-box;
        }
        .bg3 {
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <!--p.align-left*3-->
    <div class="bg1">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div class="bg2">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div class="bg3">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
</body>
</html>

 

3. background-image 속성 – 웹 요소에 배경 이미지 넣기

 

① 배경 이미지를 넣을 때 사용

② 기본형 : background-image : url(파일 경로)

 

<예제 – bg-image-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 이미지</title>
    <style>
        body {
            background-image: url('images/bg1.png');
        }
    </style>
</head>
<body>
    
</body>
</html>

 

4. background-repeat 속성 – 배경 이미지 반복 방법 지정하기

 

① 배경 이미지 반복 여부 및 반복 방향 지정 가능

② 기본형 : background-repeat : repeat | repeat-x | repeat-y | no-repeat 

③ 사용 가능한 속성 값

 

 

5. background-size 속성 – 배경 이미지 크기 조절하기

 

① 배경 이미지를 여러 크기로 조절할 때 사용

② 기본형 : background-size : auto | contain | cover | <크기 값> | <백분율>

③ 사용 가능한 속성 값

 

 

6. background-position 속성 – 배경 이미지 위치 조절하기

 

① 배경 이미지가 표시되는 위치 조절

② 기본형 : background-position : <수평 위치> <수직 위치>

 <수평 위치> : left | center | right | <백분율> | <길이 값>

 <수직 위치> :  top | center | buttom | <백분율> | <길이 값>

 

③ 키워드 표시법

- 수평 위치 : left, center, right

- 수직 위치 : top, bottom, center

ex) background-position: center bottom;

 

④ 백분율(%) 표시법

- 위치 속성 값을 백분율로 표시

- 주어진 요소의 해당 위치에 배경 이미지 위치를 백분율로 맞춤

ex) background-position: 0% 0%;

ex) background-position: 30% 60%;

 

⑤ 길이(px) 표시법

- 배경 이미지의 위치를 직접 길이로 지정

ex) background-position: 30px 20px;

 

<예제 – bg-position-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 위치 지정</title>
    <style>
        div {
            position: relative;
            left: 20%;
            right: 60%;
            height: auto;
            border: 1px solid gray;
            padding: 10px;
            margin-bottom: 20px;
        }
        #bg1 {
            background-image: url('images/bg2.jpg');
            background-repeat: no-repeat;
            background-size: contain; /*요소가 다 들어가도록 확대 및 축소*/
            background-position: left top;
            padding: 150px;
        }
        #bg2 {
            background-image: url('images/bg2.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            padding: 150px;
        }
        #bg3 {
            background-image: url('images/bg2.jpg');
            background-repeat: repeat;
            background-size: 50% 50%;
            background-position: 50% 30%;
        }
        #bg4 {
            background-image: url('images/bg2.jpg');
            background-repeat: repeat-x;
            background-size: 150px 200px;
            background-position: 10px 20px;
        }
    </style>
</head>
<body>
    <!--p.align-left*4-->
    <div id="bg1">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div id="bg2">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div id="bg3">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div id="bg4">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
</body>
</html>

 

7. background-origin 속성– 배경 이미지 배치할 기준 조절하기

 

① 배경 이미지를 배치하기 위한 기준 설정

② 기본형 : background-origin : border-box | padding-box | content-box 

③ 사용 가능한 속성 값

 

<예제 – bg-origin-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 위치 지정</title>
    <style>
        div {
            width: 300px;
            padding: 35px;
            border: 1px solid #eee;
            background: url('images/bg5.png') no-repeat;
            margin-bottom: 20px;
        }
        #bg1 {
            background-origin: border-box;
        }
        #bg2 {
            background-origin: padding-box;
        }
        #bg3 {
            background-origin: content-box;
        }

    </style>
</head>
<body>
    <!--p.align-left*4-->
    <div id="bg1">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div id="bg2">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
    <div id="bg3">
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
</body>
</html>

 

 

8. background-attachment 속성 – 배경 이미지 고정하기

 

① 배경 이미지 고정할 시 스크롤 움직임에 따라 배경 이미지 움직임 없음

② 기본형 : background-attachment : scroll | fixed

③ 사용 가능한 속성 값

 

<예제 – bg-attachment-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 이미지 고정하기</title>
    <style>
        body {
            background-image: url('images/bg3.jpg');
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: fixed; /*scroll*/
        }
        div {
            background: rgba(255,255,255,0.6);
            width: 80%;
            height: auto;
            margin-left: 10%;
        }
    </style>
</head>
<body>
    <!--p.align-left*4-->
    <div>
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
        <p>
            Integer elementum massa at nulla placerat varius.
            Suspendisse in libero risus, in interdum massa.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Vestibulum ac leo vitae metus faucibus gravida ac in neque.
            Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
        </p>
    </div>
</body>
</html>

 

<fixed로 설정한 결과창>

스크롤을 내려도 배경은 고정되어있음

 

<scroll로 설정한결과창>

스크롤을 내리면 배경도 같이 움직임

 

 

9. background 속성 – 속성 하나로 배경 이미지 제어하기

 

① 배경 관련 속성 줄여서 표시. 각 속성의 순서 상관 없이 지정 가능

② 기본형 : background: url('images/bg3.jpg') no-repeat fixed right bottom;

③ 사용 가능한 속성과 속성 값

 

 

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 04-1 CSS와 박스 모델  (0) 2021.09.05
[CSS] 03-3 그라데이션 효과로 배경 꾸미기  (0) 2021.09.05
[CSS] 03-1 웹에서 색상 표현하기  (0) 2021.09.05
[CSS] 02-4 목록과 링크 스타일  (0) 2021.09.05
[CSS] 02-3 문단 스타일  (0) 2021.09.05

관련글

댓글

티스토리툴바