CSS 배경 속성은 요소의 배경 스타일을 지정하는 데 도움이 됩니다. CSS background 속성은 요소의 배경을 지정하기 위한 약어입니다. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin 및 background-attachment는 함께 CSS 배경 속성을 구성합니다.
구문
CSS 배경 속성의 구문은 다음과 같습니다-
Selector {
background: /*value*/
} 예시
다음 예는 CSS 배경 속성을 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#im {
height: 200px;
width: 200px;
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini- logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다.
