HTML CSS

html css 백그라운드 Image

마샤와 곰 2019. 7. 1. 11:42

 

 

1. 이미지 추가

body {
  background-image: url("..경로/wall.png");
}



2. 반복

body {
  background-image: url("..경로/wall.png");
  background-repeat: repeat-x;
  background-repeat: repeat-y;
}



3. 반복 금지

body {
  background-image: url("..경로/wall.png");
  background-repeat: no-repeat;
}



4. 위치 주기

body {
  background-image: url("..경로/wall.png");
  background-position: right top;
}



5. 1줄로 표현

body {
  background: #ffffff url("..경로/wall.png") no-repeat right top;
}



6. 크기 숫자 지정

body {
  background: url("..경로/wall.png");
  background-size: 300px 100px;
}



7. 크기 비율 지정

body{
  background: url("..경로/wall.png");
  background-repeat: no-repeat;
  background-size: 75% 50%;
}



8. 크기에 맞게 주기

body{
  background: url("..경로/wall.png");
  background-repeat: no-repeat;
  background-size: cover;
}
반응형