HTML 백그라운드 이미지(Background Image) 변경 방법

백그라운드 이미지(Background Image)
배경색이라고 하며, HTML 문서의 배경색을 뜻한다. 기본색은 흰색이다. HTML 요소들 또한 각자의 배경색을 가지고 있으며, 배경색을 다른 색으로 변경하거나 다른 이미지로 변경하는게 일반적이다.

HTML 배경색을 다른 색으로 변경

HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었다. 하지만 HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하게 되었다.

CSS란?
Cascading Style Sheets 의 줄임말이다. HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>

<meta charset="UTF-8">
<title>HTML 백그라운드</title>

<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>

</head>
<body>

<h1>CSS을 이용한 글자색깔을 변경해봤다.</h1>
<p>CSS를 사용하여 빨간색 글씨로 표현해봤다. 배경색도 변경되었다.</p>

</body>
</html>

위 예제를 보면 style 속성을 이용하여 색상 이름을 변경하였는데, RGB 또는 16진수의 색상값을 넣어서 변경할 수 있다. 색상을 나타내거나 표현하는 방식은 아래 포스팅을 참고하면 되겠다.

HTML 배경을 다른 이미지로 변경

background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있다.

<태그이름 background="이미지주소">

예제

<!DOCTYPE html>
<html lang="ko">

<head>

<meta charset="UTF-8">
<title>HTML 배경 이미지</title>

</head>

<body background="https://www.itopening.com/wp-content/uploads/2019/07/itopening-log4.png">

<h1>IT Opening 사이트 이미지 주소 변경</h1>

</body>
</html>

※배경으로 이미지를 사용하면 웹브라우저에서의 페이지 로딩시간이 증가하게 된다. 대략 1~2초정도 지연되며, 용량이 큰 이미지의 경우 더욱 시간이 오래걸린다.
※작은 사이즈의 이미지를 패턴(pattern) 형식으로 만들어서 배경 이미지로 반복적으로 설정해서 사용하는게 일반적이다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다