<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size:100px;
height:1000px;
border:5px solid gray;
background-color:tomato;
background-image:url('run.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-size:contain;
background-position:center;
background:tomato url('run.png') no-repeat fixed center;
}
</style>
</head>
<body>
<div>
Hello world
</div>
</body>
</html>
background-color:백그라운드 배경색
background-image:url() 파일명을 입력해도되고 url 주소를 입력해도된다
컬러가 나오는 것은 이미지가 컬러를 가렸기 때문에 둘다 나오게 하려면 transparent라고 해서
배경이 투명인 이미지를 사용하면 된다
반복하고 싶지 않으면 background-repeat:no-repeat 또는 repeat-x repeat-y repeat(기본값)
background-attachment:fixed scroll 하면 이미지를 고정시키거나 같이 스크롤되게 할 수 있다
background-size:가로 세로 또는 cover contain
contain을 하게 되면 화면의 크기에 모든 이미지가 들어간다 cover를 하게되면 화면 전체를 이미지가 사용하게 된다 contain은 화면이 이미지를 포함 cover는 이미지를 전부 나오게 하는 기능
background-position은 이미지의 위치다
CSS를 이용하면 엘리먼트의 배경을 지정할 수 있습니다. 여기서는 배경과 관련된 중요속성들을 알아봅니다.
background-color : red
background-image : url("bg.png")
background-repeat : repeat, no-repeat, repeat-x, repeat-y
background-attachment : scroll, fixed
background-position : left top or x% y% or x y
background-size : 100px 100px or cover or contain
댓글