개인 공부/CSS

[CSS] background에 이미지 꽉차게 삽입하는 방법

COSMOSUNION 2022. 8. 16. 21:48

 

<body> 태그의 background에 image 삽입

 

 

1. 기본 형태 :

background-image: url("이미지경로")

 

 

2-1. 이미지경로가 웹일 경우 

예. background-image: url("https://images.pexels.com/photos/7008379/pexels-photo-7008379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1")

2-2. 이미지경로가 (내 컴퓨터 폴더 내) 파일일 경우

예. background-image: url("img/1.png");

 IMPORTANT 
※ 배경화면으로 지정할 이미지파일 또는 이미지파일이 저장된 폴더는 반드시 css 폴더내에 위치해야 한다.

 

 

하나의 image로 배경화면에 꽉차게 출력

 

body {
  height: 100vh;  //실행중인 스크린 크기에 맞춰 세로길이 반환
  width: 100vw;  //실행중인 스크린 크기에 맞춰 가로길이 반환 
  background-image: url("img/1.png");
  background-repeat: no-repeat; //이미지 파일 반복하지 않는다. (
  background-size: cover;  //이미지가 설정한 가로/세로길이에 맞춰 꽉차게 출력
}

 

 

 

하나의 image를 배경화면에 반복해서 출력

 

body {
  height: 100vh;
  width: 100vw;
  background-image: url("img/1.png");
}