html 배경 이미지 넣는 방법
HTML 쉽게 따라하기 - 배경 이미지 넣는 방법
홈페이지에 배경 이미지를 넣기 위해서는 먼저 사용자가 삽입하고자 하는 배경 이미지가 존재해야 하며 그 위치를 반드시 알아두어야 한다. 배경 이미지를 넣기 위해 사용되는 형식은 다음과 같다.
<body background="이미지 주소">
위와 같이 배경 이미지를 넣기 위해서는 <background> 라는 속성을 사용한다.
그런 다음 이미지 파일의 경로명과 파일명을 입력해주면 배경 이미지를 홈페이지에 삽입할 수 있다.
배경 이미지를 이용하면 배경색을 이용한 방법보다는 좀 더 화려한 홈페이지를 만들 수 있다. 하지만 잘못 사용할 경우에는 통일성이 떨어지고 산만해지기 때문에 문서와 잘 조화되는 배경 이미지를 선정하는 것이 중요하다.
다음은 배경이미지를 삽입하는 예제이다.
[예제1] ---------------------
<html>
<head>
<title> 돼지저금통 </title>
</head>
<body background="https://tistory1.daumcdn.net/tistory/.........../money.png">
</body>
</html>
-----------------------------
위의 이미지 주소는 본인 티스토리 블로그에 업로드한 주소라 중간에 주소 일부를 .... 으로 생략했다.
위의 주소처럼 이미지를 올린 곳의 주소를 넣으면 된다.
메모장에 위 소스를 입력하고 html 파일로 저장하고 클릭하여 창을 띄우면 아래와 같이 나온다.
이미지 파일은 돼지저금통 한개이다. 그런데 이렇게 나타나는 이유는 간단하다.
이미지의 크기가 작기 때문에 윈도우즈와 같이 타일 형태로 나타나게 된 것이다.
다음은 타일 형태가 아니라 화면 전체를 이용한 배경을 만들어 보자.
[예제2]--------------------------
<html>
<head>
<title> 돼지저금통 배경 </title>
</head>
<body background=https://tistory1.daumcdn.net/tistory/.........../home.png">
</body>
</html>
-------------------------------
html 내용은 똑같고 이미지를 큰것을 올렸다.
그 결과는 아래와 같다.
오히려 너무커서 원래 이미지보다 잘려 보인다.
이렇듯 이미지 크기에 따라 달라질 수 있으니 잘 생각을 해서 이미지를 조절해서 올려야 한다.
이 글을 공유합시다
