[CSS] 3. 배경이미지나 배경색상을 입혀보쟈. (background)

해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.

이번에는 앨리먼트에 배경 색상을 입히거나, 배경 이미지를 주는 방법에 대해서 알아보겠습니다.

일단 배경 색상을 입히는 방법입니다.

background:색상; // 색상에는 red와 같은 지정도 가능하고, #하고 코드로도 지정이 가능합니다.

예시입니다.

<div style="background:red;">abc</div>

<div style="background:#c9c9c9">abc</div>

이미지를 입히는 방법입니다.

이미지와 색상을 나누는 이유는, 색상과는 달리 이미지의 경우는 배경으로 지정할때 가로와 세로의 길이를 지정해줘야합니다.

이미지는 또 여러가지로 나뉘는데, 일단은 가로와 세로를 이미지의 정보로 표시할때 사용방법입니다.

<div style="width:이미지의 가로크기; height:이미지의 세로크기; background:url('이미지주소');"></div>

예시입니다.

<div style="width:100%; height:100%; background:url('/../jQuery/img/bg.jpg');">abc</div>

참고로 가로와 세로를 지정해주지 않을경우는 이렇게 뜹니다.

내용의 높이만 설정되어서 보입니다.

이것이, 배경 이미지는 높이를 꼭 지정하는 이유입니다.

그러면 이번에는 이미지에 비해, 앨리먼트의 길이(width)가 더 길때입니다.

이 경우는 2가지 옵션을 더 줘야합니다.

일단 위에 소개한 코드에서 이미지만 변경해서 사용해보겠습니다.

<div style="width:100%; height:100%; background:url('/../jQuery/img/btn01_off.png');">abc</div>

이미지가 사방으로 반복이 됩니다.
(처음의 이미지로는 이러한 현상이 없었던 이유는 필자가 사용하는 노트북 화면과 배경의 화면이 비슷했었기에 가능했었던 일입니다.)

그러면 반복에 대한 옵션을 알아보겠습니다.

background:url('') (no-repeat || repeat-x || repeat-y || repeat); // 순서대로 반복안함, 가로 반복, 세로 반복, 반복 입니다.

주로 쓰는것이 no-repeat입니다.

예를 하나 보겠습니다.

<div style="width:100%; height:100%; background:url('/../jQuery/img/btn01_off.png') no-repeat;">abc</div>

이미지가 반복되어서 나오지 않습니다.

이제 여기서 또하나의 옵션에 대해서 알아보겠습니다.

배경의 위치를 지정하는겁니다.

background:url('') (top || right || bottom || left) no-repeat;

하나의 예시를 보겠습니다.

배경 이미지를 좌상이 아닌 우하로 붙여보겠습니다.

<div style="width:100%; height:100%; background:url('/../jQuery/img/btn01_off.png') right bottom no-repeat;">abc</div>

출처 : Pure Ani's Blog