🗂️ 다중 배경 레이어 CSS 생성기

레이어 장수

배경색 (HEX, 모든 레이어 뒤)

1번 레이어 값 (맨 위)

1번 가로 위치

1번 세로 위치

1번 크기 (size)

1번 크기 가로

1번 크기 세로

1번 반복 (repeat)

2번 레이어 값

2번 가로 위치

2번 세로 위치

2번 크기 (size)

2번 크기 가로

2번 크기 세로

2번 반복 (repeat)

개별 속성 방식 CSS

단축 표기 방식 CSS

배경을 여러 장 겹칠 때 쉼표 순서가 하는 일

CSS 배경은 이미지 한 장이 아니라 여러 장을 쉼표로 나열해 겹칠 수 있습니다. 패턴 위에 사진, 그 위에 질감을 얹는 식입니다. 이 생성기는 레이어 값과 위치, 크기, 반복 방식을 레이어마다 받아 쉼표 순서를 맞춘 background-image·position·size·repeat 묶음과 단축 표기를 함께 만들어 줍니다.

출력은 W3C CSS Backgrounds and Borders 규격의 다중 배경 규칙을 따릅니다. 쉼표로 나열한 값 중 맨 앞이 가장 위에 그려지고, background-color 는 레이어마다 둘 수 없어 요소당 하나만 쓰이므로 단축 표기에서는 마지막 레이어 뒤에 붙입니다. 2026년 10월 기준 모든 주요 브라우저가 접두사 없이 지원합니다.

이 도구는 레이어 조합만 다루고 그라디언트 함수 생성은 지원하지 않습니다. url 이나 이미 가진 그라디언트 문자열을 레이어 값 칸에 붙여 넣으세요. 세미콜론이나 중괄호가 섞인 값은 규칙을 깨므로 받지 않습니다. 레이어는 3장까지 지원하며, 더 필요하면 생성된 코드에서 직접 늘려 쓰세요.

자주 묻는 질문

레이어 순서는 어느 쪽이 위인가요?

쉼표로 나열한 값 중 맨 앞이 가장 위에 그려집니다. 1번 레이어가 사용자에게 가장 가깝고, 마지막 레이어가 배경색 바로 위에 깔립니다.

그라디언트를 이 도구에서 만들 수 있나요?

그라디언트 함수 자체는 만들지 않습니다. 레이어 값 칸에 이미 가진 url 이나 그라디언트 함수를 붙여 넣으면 겹침 순서와 위치·크기·반복만 조합해 줍니다.

배경색은 왜 마지막 한 번만 들어가나요?

background-color 는 레이어마다 지정할 수 없고 요소당 하나입니다. 모든 이미지 레이어 뒤에 깔리므로 단축 표기에서도 마지막 레이어에만 적습니다.

🗂️CSS 다중 배경 레이어 코드 생성기

관련된 도구

CSS 글래스모피즘 효과 코드 생성기

z-index 레이어 시스템 설계 가이드

배경을 여러 장 겹칠 때 쉼표 순서가 하는 일

자주 묻는 질문

관련된 도구

CSS 글래스모피즘 효과 코드 생성기

z-index 레이어 시스템 설계 가이드

배경을 여러 장 겹칠 때 쉼표 순서가 하는 일

자주 묻는 질문

같은 카테고리 도구