배경 이미지 지정하기

CSS

배경 이미지 지정하기

컴맹숙 2022. 11. 15. 15:37

1. 배경 이미지 background-image

url('이미지 경로')를 사용하여 추가한다.

경로는 상대경로(현재 문서 기준), 절대경로(http://로 시작) 둘 다 사용 가능하다.

배경이미지를 추가할 때 요소보다 이미지 크기가 작으면

반복되면서 요소의 배경을 가득 채운다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배경이미지</title>
    <style>
        body {
            background-image: url('images/춘식이.jpg');
        }
    </style>
</head>
<body>
    
</body>
</html>

위 캡처는 body, 즉 웹 브라우저보다 이미지 크기가 작기 때문에

반복되면서 화면을 가득 채운다.

2. 반복 방법 지정 background-repeat

background-image 속성 사용 후

반복되는 현상을 원하는 대로 지정할 때

repeat-x(가로 반복), repeat-y(세로 반복), no-repeat(반복 없음)를 사용하여 반복 방법 지정 가능하다.

body {
		background-color:pink;
            background-image: url('images/춘식이.jpg');
            background-repeat: repeat-x;
        }

3. 배경 이미지 위치 조절 background-position

배경 이미지의 수평, 수직 위치 값 지정 가능

① 속성값 2개 -> 첫 번째 값은 수평 위치 값, 두 번째 값은 수직 위치 값

② 속성값 1개 -> 수평 위치 값으로 간주, 수직 위치 값은 50% 또는 center로 간주

left, center, right와 top, center, bottom 중 선택하거나

%, px 등으로 지정 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>불릿 대신 배경이미지 사용</title>
    <style>
        ul {
            list-style:none;
            margin-left:-30px;
        }
        li {
            background-image: url('images/book-icon.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>
    <li>무지개 물고기</li>
  </ul>
</body>
</html>

4. 배경 이미지 고정 background-attachment

fixed로 지정하면 스크롤을 해도 배경 이미지는 고정이다.

body {
            background-image: url('images/춘식이.jpg');
            background-repeat: no-repeat; /*배경이미지 반복 없음*/
            background-position:right top; /*배경이미지 위치 오른쪽 위*/
            background-attachment: fixed; /*배경이미지 스크롤 해도 고정*/
        }

5. background로 배경 이미지 제어

위 4가지 속성을 background로 한 번에 사용할 수 있다.

body {
            background: url('images/춘식이.jpg') no-repeat right top fixed;
        }

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

속성 선택자 (2)	2022.11.16
연결 선택자 (0)	2022.11.16
웹 요소의 위치 지정하기 (0)	2022.11.15
웹 문서의 레이아웃 만들기 (2)	2022.11.15
여백 조절하기 (0)	2022.11.15

현재글배경 이미지 지정하기

컴공과 컴맹숙 🐾