[CSS] background

1. background-color: 색상
2. background-image: url('주소')
3. background-repeat: 값
4. background-size : 값
5. background-position: 값

1 - 배경색
2 - 배경 이미지
3 - 이미지 반복 방법 및 여부
4 - 배경 이미지 크기 조절
5 - 배경 이미지 위치 조절

<template>
  <div class="background">
    background
  </div>
</template>

<script>


export default {
  data(){
    return {
    }
  },
    methods:{

    },

  }

</script>

<style scoped>
 .background{
   border: 3px solid red;
   margin-top: 50px;
   font-size: 100px;
   height: 555px;
   background-color: aqua;
   background-image: url('../assets/pic2.png');
   background-repeat: no-repeat;
   background-size: contain;
 }
</style>

background-repeat

• no-repeat : 반복 X
• repeat : x,y축 모두 반복
• repeat-x : x축만 반복
• repeat-y : y축만 반복

background-position

• center: 가운데 위치
• top: 가운데 상단 위치
• bottom: 가운데 하단 위치
• left(top, center, bottom)
• right(top, center, bottom) 

background-size

• contain: 화면에 여백을 주고 원본 사진이 모두 나옴
• cover: 화면에 배경이미지가 가득 차지만 원본 사진은 어느정도 짤림

 

예제)

 

1. 

   background-repeat: no-repeat;
   background-position: center right

2.

   background-repeat: repeat-x;
   background-position: bottom;

3. 

   background-repeat: no-repeat;
   background-size: contain

4.

   background-repeat: no-repeat;
   background-size: cover