내가 처음에 시도한 것은 CSS body태그에 background-image: url("") 을 추가하고, 따옴표 안에 pixabay에서 복사해 온 사진의 주소를 넣는 것이었다.
근데 사진을 바꿔봐도 이미지가 안뜨는 거다.
그래서 사진을 다운 받아서, 작성중이던 폴더 안에서 파일을 열고 copy path 하여 삽입해봤다.
그래도 실패...
같이 과제를 하던 페어 분에게 질문해서 답을 알아냈다.
HTML/CSS로 웹 배경이미지 삽입하는 방법
- HTML 문서 body 태그 밖에 style태그를 작성하고 그 안에 css의 body태그에 대한 background-image 속성을 추가해준다.
<style>
body {
background-image: url("")
}
</style>- 여기서는 두가지 중 한가지 방법을 선택할 수 있다.
- 구글링한 사진의 주소를 삽입하기
먼저 구글링한 사진을 우클릭하여 '이미지 주소 복사'를 해준다.
그 다음 복사한 주소를 주소창에 넣어 빈 페이지에 이미지가 뜨는지 확인한다. 여기서 이미지가 뜨지 않거나 사이트가 나오면 이미지를 쓸 수 없다.
복사한 주소를 속성값에 붙여넣기 한다. - 이미지 다운로드 후 상대경로 삽입하기 (내가 사용한 방법)
이미지를 다운로드한 후, 작업중인 폴더 내에 이미지를 저장해준다.
그런 다음 이미지 파일을 우클릭하여 상대경로(coopy relative path)를 속성값에 복사 붙여넣기 해준다.
<style>
body {
background-image: url("water.jpg") path
}
</style>
Zoë Park