【CSS】background 배경 설정《1》

홈페이지의 배경 관련 스타일을 일괄로 지정하는 속성입니다. 색상 이름, 색상 코드 또는 transparent(투명/초기 값) 값으로 요소의 배경색을 설정합니다.

구문

background-color: 속성 값;

.sample {
    background-color: blue;
    color: white;
}
.sample1 {
    background-color: #252afd;
    color: #ffffff;
}
.sample2 {
	background-color: rgb(143,112,103);
	color: rgb(255,255,255);
　/*color:문자색*/
}

샘플의 결과는 여기를 Click!

구문

배경 이미지를 지정할 때 사용합니다. 배경 이미지는 URL로 지정합니다.

background-image: url(".gif/.jpg/.png 이미지 파일명")

<html>
<head>
<style>
body {
    background-image: url("background_sample1.gif");
}
</style>
</head>
<body>

<h1>배경 이미지 샘플입니다.</h1>

</body>
</html>

한장의 이미지를 수직 수평으로 반복하여 표시하고 있습니다.

샘플의 결과는 여기를 Click!

background-repeat:no-repeat;

<html>
<head>
<style>
body {
    background-image: url("background_sample1.gif");
    background-repeat:no-repeat;
}
</style>
</head>
 <body>

<h1>배경 이미지 샘플입니다.</h1>

 </body>
</html>

한 장의 이미지를 반복하지 않고 한 번만 표시합니다.

샘플의 결과는 여기를 Click!

위 CSS 코드는 아래와 같이 간단하게 작성됩니다.

 
|
background:url("background_sample1.gif") no-repeat;
|

background 속성

background-repeat	repeat：반복해서 표시(초기 값)cno-repeat：배경 이미지를 하나만 표시한다. repeat-x：배경 이미지를 수평 방향으로 배열하기 repeat-y：배경 이미지를 수직 방향으로 배열하기 space：여백을 각 배경 이미지 사이에 균등하가게 배분해 배열하기. round：표시 영역에 최대한의 이미지 수가 표시되도록 사이즈를 조절하기.
background-position	center：중앙에 표시합니다. left：왼쪽에 표시합니다. right：오른쪽에 표시합니다. top：상단에 표시합니다. bottom：하단에 표시합니다. percentage(%)：% 비율로 이미지 위치를 지정합니다.

background-repeat

*repeat：반복해서 표시(초기 값)c*no-repeat：배경 이미지를 하나만 표시한다.

*repeat-x：배경 이미지를 수평 방향으로 배열하기

*repeat-y：배경 이미지를 수직 방향으로 배열하기

*space：여백을 각 배경 이미지 사이에 균등하가게 배분해 배열하기.

*round：표시 영역에 최대한의 이미지 수가 표시되도록 사이즈를 조절하기.

background-position

*center：중앙에 표시합니다.

*left：왼쪽에 표시합니다.

*right：오른쪽에 표시합니다.

*top：상단에 표시합니다.

*bottom：하단에 표시합니다.

*percentage(%)：% 비율로 이미지 위치를 지정합니다.

Prev12 Next

스폰서 링크