프로그래밍 공부 일기

2020년 6월 4일 Progate Lv.83
웹페이지 제작 중
CSS (back-ground-image)에서 배경 이미지가 표시되지 않았습니다.

background-image 사용법

background-image: url(이미지 파일의 URL);
background-image: url("이미지 파일에 대한 경로");

url과 반각 괄호 사이에 공백을 넣지 않음

index.html

<style>
  body{
    background-image:url(photo/S__520912916.jpg);
  } 
</style>

이와 같이 index.html 파일과 같은 폴더 내에 photo 폴더가 있고, 그 안의 이미지 파일 S_520912916.jpg를 배경으로 설정하는 경우, url()의 파일 경로 「photo/S_520912916.jpg」가 된다.

stylesheet.css

/* スタイルシートと同じディレクトリ */
background-image: url("image.png");  

/* スタイルシートから１つ上の階層 */
background-image: url("../image.png"); 

/* スタイルシートから１つ下の階層（今回の場合） */
background-image: url("./photo/S__520912907.jpg");