[CSS] 배경(background)

728x90

배경(background)

background-color : 배경 색 지정

background-repeat : 배경 이미지 지정

background-position : 배경 이미지 반복 지정

background-attachment : 배경 이미지의 고정 여부

background : 관련 속성을 한 줄로 표기

해당 위치에 png파일이 있어야 아래 코드가 정상 작동합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경</title>

<style>

	h1{
		background-image: url("resources/img/img01.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	p{
		background-image: url("resources/img/img01.png"), url("resources/img/img02.png");
		background-position: center;
	}

</style>
</head>
<body>

	<h1>background img</h1>
	
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
	Curabitur blandit neque ut elementum pellentesque. <br>
	Nunc iaculis, felis quis rutrum pellentesque, velit tortor accumsan purus, <br>
	sed laoreet lorem arcu at lacus. Nam eget magna mollis, ultrices mi vitae, laoreet enim. <br>
	Ut imperdiet ligula semper metus sollicitudin, pellentesque venenatis nisi pharetra. <br>
	Mauris non consectetur diam. Fusce nec porta erat. <br>
	Maecenas auctor arcu a diam dignissim, ac dignissim mauris tempor. <br>
	Pellentesque et elit mi. Integer nisl ligula, suscipit eu risus sed, tincidunt dignissim erat. <br>
	Sed eu lectus id justo sagittis suscipit. <br>
	Class aptent taciti sociosqu ad litora torquent per conubia nostra, <br>
	per inceptos himenaeos. Quisque at risus eu turpis faucibus auctor. <br>
	Vestibulum sed hendrerit massa. Etiam metus arcu, accumsan sed convallis ut, consectetur vitae nisl.<br>
	<br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br>
	</p>


</body>
</html>

728x90

'Web > CSS' 카테고리의 다른 글

[CSS] 레이아웃(layout) - float, clear, display, overflow, position (0)	2021.12.13
[CSS] 상자(box) (0)	2021.12.12
[CSS] 단락(paragraph) (0)	2021.12.10
[CSS] 폰트(font) (0)	2021.12.09
[CSS] 선택자(selector) (0)	2021.12.08

'Web > CSS' 카테고리의 다른 글

티스토리툴바