CSS 배경 이미지, repeat, background-position

FrontEnd/HTML

by H_Develop 2022. 6. 20. 17:11

배경 이미지

<img src="#"> 과 달리 배경에 이미지를 입힐 수 있다.

repeat 속성 값

no-repeat	반복되지 않음
repeat-x	수평 방향으로 반복
repeat-y	수직 방향으로 반복

background-position

left top	좌측 상단에 위치
center top	중앙 상단에 위치
right top	우측 상단에 위치
left center	좌측 중앙에 위치
center center	한 가운데 위치
right center	우측 중앙에 위치
left center	좌측 중앙에 위치
center bottom	중앙 아래에 위치
right bottom	우측 아래에 위치

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

	body {background-image : url("texture.png");
    	width : 200px;
        background-repeat : no-repeat;
        background-position : right top;}
	p	 {width : 600px;
    	line-height : 180%;}

</style>
</head>
<body>

	<h3>배경 이미지 삽입</h3>
    <p>웹 페이지 배경 이미지를 삽입하는 데에는, background-image 속성을 이용한다.<br>
	배경 이미지가 바탕화면보다 작을 때에는 배경 이미지가 수평과 수직 방향으로 반복된다.</p>

</body>
</html>

'FrontEnd > HTML' 카테고리의 다른 글

예제 (0)	2022.06.21
Table, Display, 목록 꾸미기 (0)	2022.06.20
선택자 (그룹, ID, CLASS, 하위) (0)	2022.06.20
DIV (BOX, division구분) (0)	2022.06.20
Border, Margin, Padding 경계선, 테두리, 외부 내부 여백 (0)	2022.06.17