[CSS] CSS 배경 이미지(background-image)

https://tadaktadak-it.tistory.com/69?category=1024176

[CSS] background(배경)

1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -..

tadaktadak-it.tistory.com

1. 배경이미지 스타일(background-image)

- 웹 화면 또는 박스 모델 등의 배경으로 이미지를 삽입할 때 사용

* 배경 이미지 관련 속성

background-image	이미지를 삽입할 경우 사용
background-size	이미지의 크기를 조절
background-repeat	이미지가 박스보다 작을 경우 반복 속성 결정
background-position	이미지의 위치를 지정
background-attachment	이미지의 화면 스크롤링 고정 여부 결정
background-clip	이미지 박스의 border, padding, text등에 표시될 지 여부 결정

2. background-image

- 이미지를 삽입할 경우 사용

- background-image: url("./day09-1.jpg"); : 이미지의 url(경로)를 설정하여 이미지를 표시

- background-image: url("./day09-1.jpg"), url("./day09-2.jpg");

: 이미지 url을 여러개 사용 가능하며, 이 경우 레이어 형식으로 쌓이게 됨
: 처음 지정한 이미지가 맨 앞에 보여지며, 마지막 이미지가 가장 뒤에 보여진다.

<body>
    배경 이미지에서 repeat를 설정하지 않으면 기본값은 repeat이다.
    <div class="back-size"></div>

    repeat를 no-repeat로 설정하고 2개의 이미지를 설정
    <div class="back-size back-layer"></div>
</body>

<style>
    div { border: 2px dotted gray; }
    .back-size {
        width: 200px;
        height: 200px;
        background-image: url("./day12-1.png");
    }
    .back-layer {
        background-image: url("./day12-1.png"), url("./day12-2.jpg");
        background-repeat: no-repeat;
    }
</style>

3. background-size

- 이미지의 크기를 조절

auto	이미지를 원래 사이즈 그대로 표시(기본값)
cover	이미지의 비율을 유지하며 화면을 채움
cantain	가로/세로 중 먼저 채워지는 쪽으로 이미지를 채움
100px 50px	가로/세로 순으로 픽셀 값으로 지정
60% 70%	가로/세로 순으로 퍼센트 값으로 지정(부모 요소에 따름

<body>
    <h2>background-size</h2>

    cover: 이미지의 비율을 유지하며 화면을 채움
    <div style="background-size: cover;"></div>
    cantain: 가로/세로 중 먼저 채워지는 쪽으로 이미지를 맞춤
    <div style="background-size: contain;"></div>
    100px 50px: 가로/세로 순으로 픽셀 값으로 지정
    <div style="background-size: 100px 50px;"></div>
    60% 70%: 가로/세로 순으로 퍼센트 값으로 지정(부모 요소에 따름)
    <div style="background-size: 60% 70%;"></div>
</body>

<style>
    div {
        border: 2px dotted gray;
        width: 300px;
        height: 200px;
        background-image: url("./day12-1.png");
        background-repeat: no-repeat;
    }
</style>

4. background-repeat

- 이미지가 박스보다 작을 경우 반복 속성 설정

no-repeat	반복하지 않고 한번만 표시
repeat-x	가로로만 반복 표시
repeat-y	세로로만 반복 표시
repeat	바둑판 모양으로 가로/세로 모두 반복 표시(기본값)
space	반복 가능한 만큼 반복, 공간이 남으면 이미지 사이 여백 채움
round	반복 가능한 만큼 반복, 공간이 남으면 이미지 확대 표시

<body>
    <h2>background-repeat</h2>

    no-repeat
    <div style="background-repeat: no-repeat;"></div>
    repeat-x
    <div style="background-repeat: repeat-x;"></div>
    repeat-y
    <div style="background-repeat: repeat-y;"></div>
    space
    <div style="background-repeat: space; width: 500px; height: 500px;"></div>
    round
    <div style="background-repeat: round; width: 500px; height: 500px;"></div>
</body>
<style>
    div {
        border: 1px dotted gray;
        width: 360px;
        height: 200px;
        background-image: url("./day12-1.png");
    }
</style>

5. background-position

- 이미지의 위치를 지정

center center	가로/세로 순으로 정렬(중앙 정렬) - 기본값은 left top 가로는 left, center, right 세로는 top, center, bottom 중 선택
50px 25px	가로/세로 순으로 픽셀 값으로 지정
70% 50%	가로/세로 순으로 퍼센트 값으로 지정

<body>
    <h2>background-position</h2>

    center center
    <div style="background-position: center center;"></div>
    bottom right
    <div style="background-position: bottom right;"></div>
    50px 25px
    <div style="background-position: 50px 25px;"></div>
    70% 50%
    <div style="background-position: 70% 50%;"></div>
</body>

<style>
    div {
        border: 1px dotted gray;
        width: 360px;
        height: 200px;
        background-image: url("./day12-1.png");
        background-repeat: no-repeat;
    }
</style>

6. background-attachment

- 이미지의 화면 스크롤링 고정 여부 결정

fixed	배경을 뷰포트로 고정, 화면에 스크롤이 있어도 스크롤 안함 이미지가 윈도우 창에 상대적인 위치로 고정 전체 배경에 고정됨
local	배경을 콘텐층 고정, 콘텐츠와 함께 배경도 스크롤 됨 스크롤 할 때 요소의 내용에 상대적인 위치 ** local은 많이 쓰지 않으며, 주로 overflow: auto; 속성과 자주 쓰임
scroll	배경을 요소 자체에 고정하여 함께 스크롤되지 않음(기본값) 이미지가 요소에 상대적인 위치

<body>
    <h2>background-attachment</h2>

    <section style="width: 900px; height: 600px;">
        <div style="background-attachment: scroll;">
            <h1>scroll</h1>
            <p>배경을 요소 자체에 고정</p>
            <p>콘텐츠와 함께 스크롤 되지 않음</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
        </div>
        <div style="background-attachment: fixed;">
            <h1>fixed</h1>
            <p>배경을 뷰포트에 고정</p>
            <p>화면에 스크롤이 있어도 스크롤 안함</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
        </div>
        <div style="background-attachment: local;">
            <h1>local</h1>
            <p>배경을 콘텐츠에 고정</p>
            <p>콘텐츠와 함께 배경도 스크롤 됨</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
            <p>안녕하세요</p><p>프론트엔드</p><p>과장입니다.</p>
        </div>
    </section>
</body>
<style>
    body {
        padding: 0;
        margin: 0;
        padding-bottom: 2000px;
    }
    div {
        display: inline-block;
        border: 1px solid gray;
        width: 30%;
        height: 500px;
        overflow: auto;
        background-image: url("./day12-5.jpg");
        background-repeat: no-repeat;
        line-height: 80px;
    }
</style>

7. background-clip

- 이미지 박스의 border, padding, text등에 표시될 지 여부 결정

border-box	테두리 경계까지 모두 차지 점선 테두리 사용시 투명 부분에 이미지 표시
padding-box	안쪽 여백까지 차지, 테두리에서는 표시되지 않음 패딩까지 다 채움
content-box	배경을 콘텐츠 상자에 맞춤 안쪽 여백, 테두리에서 표시되지 않음
initial	기본값으로 설정
inherit	부모 요소의 속성값을 상속 받음

<body>
    <h2>background-clip</h2>

    <div style="background-clip: border-box;"></div>
    <div style="background-clip: padding-box;"></div>
    <div style="background-clip: content-box;"></div>
</body>

<style>
    div {
        border: 10px dotted gray;
        width: 360px;
        height: 200px;
        margin-top: 5px;
        margin-bottom: 20px;
        padding: 20px;
        background-color: rgb(147, 158, 255);
    }
</style>

저작자표시

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] CSS 위치 지정 및 화면 중앙 배치 (0)	2022.10.06
[CSS] CSS float, clear 속성 (1)	2022.10.05
[CSS] CSS block vs inline, <div> vs <span> (1)	2022.09.22
[CSS] CSS 박스 모델, border, padding, margin (0)	2022.09.22
[CSS] CSS 배경(background), 글자 색상(color) (1)	2022.09.21