[TIP] 배경을 이미지로 넣는 방법

Tip&Tech

[TIP] 배경을 이미지로 넣는 방법

내.맘.대.로 2016. 8. 10. 17:38

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다.

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.

배경색은 설명하지 않고, 배경이미지를 설명하는 이유가 있습니다. 배경색이야, 원하는 색을 지정해 주면 끝나는데 배경이미지는 조금 더 복잡한 설정이 들어갈 수 있거든요.

배경을 넣는 가장 기본이 되는 코드입니다. 이렇게 하면 장(챕터) 전체에 배경이미지를 넣어 줄 수 있습니다.

* 사용한 배경 이미지

이 작은 타일 하나로 페이지 전체 배경을 넣을 수 있어요.

<head>

<style>

p {

text-align : justify;

}

body {

}

</style>

</head>

<body>

<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>

</body>

배경이미지가 가로*세로 100px인데 전체에 적용이 됩니다. 이건 background-image 속성이 배경이미지를 바둑판식으로 반복하게 되어 있어서예요. 일정한 패턴이 있는 배경이라면 작은 크기의 이미지로 배경 지정이 가능합니다.

body 대신 선택자를 지정해 배경을 넣으면 <div class="bg_image"></div>처럼 클래스로 글상자를 만들 수 있어요. 본문 전체가 아니라 본문의 특정 영역만 배경이미지처리를 해 줄 수 있지요.

body {

background-repeat: no-repeat;

}

background-repeat 속성을 이용하면 반복을 막거나, 가로/세로를 지정해 반복할 수 있습니다.

background-repeat : no-repeat; /*반복 안함*/

background-repeat : repeat-x; /*가로만 반복*/

background-repeat : repeat-y; /*세로만 반복*/

background-repeat : no-repeat;

background-repeat : repeat-x;

배경 이미지를 가운데로 놓고싶다면 background-position: center; 속성을 사용하면 됩니다. 이때 no-repeat 속성도 같이 지정을 해줘야되요. 그렇지 않으면 배경이미지가 화면을 가득 채우기 때문에 이미지를 가운데 둔 의미가 없어져요.

body {

background-image : url('../Images/bg_orange03.jpg');

background-repeat : no-repeat;

background-position : center;

}

background-repeat : no-repeat;

background-position : center;

그런데 좀 이상하지요? 아마 정 중앙에 배경이미지가 올거라고 기대하셨을 거예요. 정 중앙에 온게 맞습니다. 그런데 정 중앙의 기준이 뷰어 화면이 아니어서 저렇게 나옵니다. 만약 텍스트가 화면에 가득 차있다면 배경이미지는 정 중앙에 올거예요.

background-position은 아래와 같은 값을 지정할 수 있습니다. 쉬운 영어니 설명 안해도 이해 하실거예요^^

center

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

x% y% (% 대신 px, cm, em, pt 등의 단위 사용 가능)

공백이 있을 때도 배경이미지가 정 중앙에 오게 하려면?

background-attachment : fixed; 속성을 이용할 수 있습니다. 그런데 fixed 값을 사용하려면 주의해야되요. 페이지 넘김 방식이 아닌 스크롤 방식의 뷰어에서는 스크롤을 해도 배경이미지가 화면 가운데 고정됩니다. 텍스트는 스크롤이 되지만 배경은 멈춰있는거예요.

그리고 뷰어에 따라 다른 결과가 나타날 수 있으니 주의하세요.

body {

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

}

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

배경이미지 크기를 조절할 수도 있습니다.

background-size: 200px 200px;를 적용하면 배경이미지 크기가 100px짜리여도 뷰어에서는 200px로 보입니다.

body {

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

background-size: 200px 200px;

}

그럼 지금까지 설명한 내용으로 마지막 실습을 해볼게요.

아래 이미지를 배경으로 글상자를 만들어 글을 넣어 보겠습니다. 멋진 시라도 넣으면 좋겠지만 그런 감성은 부족하니 이해하세요 ^^;

<head>

<style>

p {

text-align : justify;

}

.txt_box {

margin : 1em;

padding-top : 1em;

color : white;

}

.bg_flower {

background-repeat: no-repeat;

background-size: 200px 300px;

width : 200px;

height : 300px;

margin : auto;

display : box;

}

</style>

</head>

<body>

<p class="txt_box">책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>

</div>

</body>

</html>

!! 배경 넣을 때 주의하세요 !!

단순 패턴의 배경이라면 문제가 되지 않지만, 위 예처럼 배경이미지 크기를 고정시킬 경우 뷰어나 화면 크기에 따라 다 글상자 크기가 달라집니다. 글상자 크기를 고정시키지 않으면 화면에 따라 배경이미지가 완전히 보이지 않거나 가로*세로 비율이 틀어질 수 있고요. PC에서 작업해 원하는 결과가 나왔다 해도 스마트폰이나 태블릿, 그리고 유통사 뷰어 별로 편집 결과가 다르게 보일 수 있습니다. 유통사 뷰어 문제도 아니고, 스타일을 잘못 넣어서 그런 것도 아니에요. EPUB이라 그렇습니다. 편집자가 원하는걸 정확히 알지 못하면 배경이미지는 '특히' 원하는 결과를 얻기 어렵습니다.

저작자표시 비영리 변경금지