CSS

Background-image

GOD03219 2019. 5. 6. 16:38

Html 요소의 배경을 이미지로 설정하고 싶다면 background-image속성을 사용한다.

body{

background-image: url('zomebie.png')

}

이렇게 속성을 준다면 zomebie.png란 이미지로 배경화면이 설정되는데 요소의 배경을 꽉 채우기 위해 이미지가 수평과 수직으로 반복되어 나타난다. 

background-repeat속성을 이용하면 수직이든 수평이든 원하는 방식으로 이미지가 반복된다. 

repeat-x : horizontally repeated

repeat-y : vertically repeated

no-repeat : once repeated

그 외에도 background-position, background-attachment 속성이 있다.

이렇게 많은 속성들을 하나의 속성에 나열하여 정의할 수 있다.

background: #ffffff url("img_tree.png") no-repeat right top;