css3 여러 배경 이미지의 크기 정의

수다왕

· 8년 전 · 조회 1631 1631

여러 배경 이미지의 크기 정의

이 background-size속성은 여러 배경으로 작업 할 때 쉼표로 구분 된 목록을 사용하여 여러 배경 크기 값을 허용합니다.

다음 예제에는 세 가지 배경 이미지가 있으며 각 이미지의 배경 크기 값이 다릅니다.

#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

padding: 15px;

background-size: 50px, 130px, auto;

}

</style>

</head>

<body>

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1247	레이아웃	로딩 타입 1번 스킨 및 코드 링크로 들어와서 긁어가세요. [10]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1605
1246	레이아웃	로딩 타입2(어제에 이어서... 그리고 개발자 설명 추가) [11]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1215
1245	레이아웃	버튼 UI(hover시 테두리 애니메이션 및 색깔변경) [3]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1989
1244	레이아웃	로딩 타입5(글자 귀엽게 통통 요청사항) [4]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1505
1243	HTML	스크롤다운시 모션효과	조아웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1669
1242	HTML	안드로이드 아이폰 기기별 SMS 문자버튼	godmin 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	993
1241	HTML	간단한 FLEX 예제	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1185
1240	HTML	간단한 반응형 페이지 레이아웃 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1206
1239	HTML	간단한 Flex 활용 예제 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1797
1238	CSS	가운데 정렬. 가장 심플?(정리) [1]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1304
1237	CSS	textarea의 이런 트릭? 들어보지도 못했던? [2]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1771
1236	CSS	css의 상속에 관한 팁입니다. [3]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1731
1235	HTML	구글 검색 최적화하는 태그 입니다. [2]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1197
1234	기타	GNUBOARD5에서 SVG 로딩바로 백로딩을 띄우는 코드에요 [2]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	881
1233	CSS	aspect-ratio 활용하기	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1112
1232	기타	준비중, 공사중 임시페이지 - 마우스에 반응하며 움직이는 기하학 배경 [2]	웹사이팅 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2132
1231	CSS	개인적으로 꼭 이해하고 넘어가야 할 것 3가지 [8]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1912
1230	CSS	progress 엘레먼트의 스타일링 [3]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1918
1229	반응형	[bootstrap5] 모바일에서 br태그 줄바꿈 기능 없애기	까투리장끼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1220
1228	반응형	모바일에서 br태그 줄바꿈 기능 없애기 [7]	탈환대 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	4169
1227	웹접근성	웹 표준 검사하기	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1721
1226	반응형	반응형을 위한 미디어쿼리 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1997
1225	CSS	Animation 동작 효과 주기 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1557
1224	HTML	버튼 클릭시 리스트 스크롤 상단으로 이동하기	탈환대 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1657
1223	HTML	모바일 정회원 가입페이지 만들어주실분 있을까요?? [1]	위치앱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1383
1222	CSS	body 외부 정렬	EI소프트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1379
1221	CSS	이미지 비율대로 리사이징 하기 [1]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1667
1220	CSS	flex 레이아웃 [1]	네이비블루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2020
1219	CSS	flex 개념 이해하기 좋은 사이트 [4]	생선구이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1628
1218	기타	howler.js [2]	min0000 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2488