css / 배경이미지 삽입 기초

IT컴퓨터

by 자기 2021. 4. 23. 20:28

728x90

CSS로 배경이미지를 삽입해 보겠습니다.

배경이미지의 가장 기초가 되는 내용이 되겠네요.

먼저 스타일시트의 소스를 볼까요.

1. 스타일시트 소스

<style>
.bgImg {
       background-image : url('trees.png');
       width : 500px;
       height : 300px;
}
</style>

2. HTML 소스

<div class="bgImg">
배경이미지 위에 출력할 텍스트
</div>

3. 결과

4. 전체소스 코드

<!doctype html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <style>
    .bgImg {
        background-image : url('trees.png');
        width:500px;
        height:300px;
    }
    </style>
</head>
<body>
    <div class="bgImg">
        배경이미지 위에 보이는 텍스트
    </div>
</body>
</html>

5. 전체소스 코드는 아래에서 다운로드 받으세요!

01_배경이미지삽입_01.zip

0.63MB

728x90

'IT컴퓨터' 카테고리의 다른 글

네이버 블로그 서로이웃 관리 프로그램 통계빈 (0)	2021.07.28
[아이폰] 이름이 "% p % s % s % s % s % n"인 Wi-Fi에 연결하면 큰일나요~! (0)	2021.07.28
윈도우 11 배경화면 및 UI 디자인 유출 (0)	2021.07.28
갤럭시 S21울트라 - 주머니에 넣지 마세요 (0)	2021.07.08
Visual Studio Code 단축키 VS code (0)	2021.07.08