티스토리 뷰

💕IT 공부하기/CSS3

[CSS3] background-size : 배경 이미지의 크기 조절하기

수리즘 2023. 4. 24. 17:27

기존의 CSS에서는 특정 요소 안에 들어가는 배경 이미지의 크기를 임의로 변경할 수 없었습니다. 결국, 일일이 해당 박스의 크기에 맞게 포토샵에서 이미지의 사이즈를 조절해야 했지만 CSS3의 background-size를 이용하면 배경에 들어갈 이미지를 다양한 방법으로 리사이즈할 수 있습니다.

(1) background-size : 넓이 값 높이 값;

background-size : cover;

background-size : contain;

배경 이미지의 크기를 지정하는 데에는 3가지의 방법이 있습니다. 일반적으로 풀 스크린 환경에서의 배경 이미지 사이즈는 background-size:cover;를 주로 활용합니다.

다음의 예제를 통해 background-size의 기본 개념을 숙지해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>gradient</title>
    <style>
        div {
            width: 800px;
            height: 600px;
            margin: 50px auto;
            border: 1px solid #000;
            background: url(puppy.jpg) no-repeat center center;
        }
        div:nth-child(1) { background-size: 600px 400px;}
        div:nth-child(2) { background-size: cover; }
        div:nth-child(3) { background-size: contain; }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

<div> 태그에 공통으로 배경 이미지를 지정하고 각각의 순서에 맞게 배경 이미지의 사이즈를 고정값, cover, contain으로 설정합니다.

첫 번째 배경 이미지는 원본 이미지의 비율은 무시된 채 지정된 넓이 값과 높이 값으로 설정되었으며, 두 번째 이미지는 비록 좌우는 잘렸지만 해당 요소 안에 빈 여백이 없이 채워졌습니다. 마지막 이미지는 상하에 여백이 생겼지만, 전체 이미지가 잘린 곳 없이 해당 요소 안에 들어간 것을 확인할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'💕IT 공부하기 > CSS3' 카테고리의 다른 글

[CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기 (0)	2023.04.27
[CSS3] box-sizing : 볼록 요소의 넓이와 높이 값 안에 padding과 border 값 포함하기 (0)	2023.04.25
[CSS3] gradient : 배경에 그라디언트 색상과 모양 지정하기 (0)	2023.04.19
[CSS3] border-radius : 사각형의 모서리를 둥글게 하기 (0)	2023.04.19
[CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기 (0)	2023.04.17