IV. 배경꾸미기 - 2. 배경 이미지 지정하기

Hush 2022. 6. 5. 20:05

background-image : 배경 이미지 넣기

웹 요소에 배경 이미지를 넣을 때 기본으로 알아 둘 속성은 background-image이다.

다음 기본형과 같이 url()에 이미지 파일 경로를 넣어서 사용한다.

background-image : url('이미지 파일 경로')

이미지 파일은 *.jpg, *.gif, *.png 형식을 사용하며 파일 경로에는 작은 따옴표나 큰 따옴표를 붙인다.

파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고, http://로 시작하는 절대 경로를 사용할 수도 있다.

배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        </style>
    </head>
    <body style="background-image: url('images/Youtube.png')">
    </body>
</html>

background-repeat : 배경 이미지의 반복 방법을 지정

배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지, 반복을 할지 말지를 지정할 수 있다.

종류	설명
repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복합니다. 기본값입니다.
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복합니다.
repeat-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복합니다.
no-repeat	한 번만 표시하고 반복하지 않습니다

background-position : 배경 이미지의 위치를 조절

배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.

background-position: <수평 위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>

속성값을 2개로 지정한다면 첫 번째 값은 수평 위치의 값이 되고 두 번째 값은 수직 위치의 값이 된다.

하나만 지정한다면 지정한 값을 수평 위치값으로 간주하고 수직 위치값은 50%나 center로 간주한다.

위치 속성값으로 백분율을 사용한다는 것은 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 뜻이다.

예를 들어 background-position : 30% 60%라면 배경 이미지를 넣을 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춥니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
        </style>
    </head>
    <body style="background-image: url('images/Youtube.png'); background-position : 30% 60%; background-repeat: no-repeat; border : solid">
        <p>sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. sample text. </p>
    </body>
</html>

보통은 예약어를 가장 많이 사용한다.

다음 예제는 불릿 대신 배경이미지를 사용하는 예시이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            ul {
                list-style-type: none;
                margin-left: -30px;
            }
            li {
                background-image: url('images/star-bullet.png');
                background-repeat: no-repeat;
                background-position: left center;
                padding-left: 50px;
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <h1>이지스 퍼블리싱</h1>
        <ul>
            <li>회사소개</li>
            <li>도서</li>
            <li>자료실</li>
            <li>동영상강의</li>
        </ul>
    </body>
</html>

background-origin : 배경 이미지의 적용 범위를 조절

박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있다. 이렇게 배경 이미지를 적용할 범위는 이 속성을 이용하면 된다.

종류	설명
content-box	박스 모델에서 내용 부분에만 배경 이미지를 표시합니다. 기본값입니다.
padding-box	박스 모델에서 패딩까지 배경 이미지를 표시합니다.
border-box	박스 모델에서 테두리까지 배경 이미지를 표시합니다.

background-attachment : 배경 이미지를 고정

배경 이미지가 있는 웹 문서를 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다.

하지만 이 속성을 사용하면 배경 이미지를 고정할 수 있다.

종류	설명
scroll	화면을 스크롤하면 배경 이미지도 스크롤됩니다. 기본값입니다.
fixed	화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤됩니다.

backgroud 속성 하나로 배경 이미지 제어하기

지금까지 설명한 배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있다.

속성값이 다르니 입력 순서는 상관 없다.

body{
	background-image: url('images/bg4.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachmnet: fixed;
}

이것을

background: url('images/bg4.png') no-repeat center bottom fixed;

이렇게 작성할 수 있다.

background-size : 배경 이미지 크기를 조절

배경을 채울 요소 크기해 비해 이미지가 너무 작거나 클 경우 이 속성을 사용하여 배경 이미지의 크기를 조절할 수 있다.

이 속성은 특히 화면ㅇ에 배경을 이미지를 가득 채워야 할 때 유용하다.

속성값이 하나라면 그 값은 너비로 인식되고 높이는 비율에 맞추어 자동 계산한다.

종류	설명
auto	원래 배경 이미지 크기만큼 표시합니다. 기본값입니다.
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소 합니다.
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소합니다.
<크기>	이미지의 너비와 높이를 지정합니다. 값이 하나만 주어질 경우 너빗값으로 인식하고 비율에 맞추어 높이를 자동 계산합니다.
<백분율>	배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대, 축소합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                display: inline-block;
                margin: 10px;
                border: solid;
                background: url('images/EiffleTower.jpg') no-repeat left top;
            }
        </style>
    </head>
    <body>
        <div class="box" style="background-size: auto;"></div>
        <div class="box" style="background-size: 150px;"></div>
        <div class="box" style="background-size: 50%;"></div>
        <div class="box" style="background-size: 100% 100%"></div>
        <div class="box" style="background-size: contain"></div>
        <div class="box" style="background-size: cover"></div>
    </body>
</html>

저작자표시 (새창열림)