【CSS】배경 이미지 설정

background-image

배경 이미지를 지정합니다.
background-image : 이미지 URL;

background-color 로 배경색은 설정할 수 있었지만, 그것만으로는 왠지 맛있지 않다・・・
그렇다면 배경 이미지를 넣어 보자

예.html

<div>
  <p>海はいいねぇ</p>
</div>

예.css

div {
  color: white;
  width: 100%;
  height: 500px;
  background-image: url(https://www.pakutaso.com/shared/img/thumb/RED19515A006_TP_V.jpg);
}

하단에 background-image: 이미지 URL; 넣어 보았습니다

웹
↓


이미지의 왼쪽 상단에 문자와 사진이 포함되었습니다
문자로 작성한 대로
바다는 좋다 ~
···와 재미있는!
바다가 아닌 하늘 밖에 비치지 않는다! !

원인은 내가 높이를 height: 500px; 로 하고 있기 때문에 들어가지 않는 이미지는 잘라 버렸다고 생각합니다

그렇다고 높이를 바꾸고 싶지 않아

그런 때는・・・!
background-size: cover; 추가

예.css

div {
  color: white;
  width: 100%;
  height: 500px;
  background-image: url(https://www.pakutaso.com/shared/img/thumb/RED19515A006_TP_V.jpg);
  background-size: cover;
}

웹
↓


표시되었습니다!

background-size : cover; ... 이미지를 딱 크기로 표시