[css] 배경이미지 넣기

안녕하세요. 플입니다.

오늘은 css로 배경 이미지를 넣어보겠습니다.

 

---

 1.  배경 이미지 

우선 배경으로 사용할 이미지를 저장해줍니다.

저는 키캡 모양을 배경으로 사용할 것입니다. 이때 이미지에 배경 부분을 투명하게 하려면 png로 저장해주셔야 합니다.

 

 

---

 2.  background 

p{ background:url('../images/sub1_0.png') no-repeat center center; }

background를 이용해 이미지를 배경으로 넣어줍니다.

 

먼저 url을 입력해 이미지를 불러옵니다. 맨 앞의 ..은 웹에 올렸을 때 해당 도메인이 써질 자리입니다.

뒤쪽 부분은 평소 이미지 주소를 적는 것처럼 입력해주시면 됩니다.

 

그리고 no-repeat를 이용해 반복이 없는 배경 이미지를 만듭니다.

 

마지막으로 x축과 y축으로 위치를 정해줍니다.

저는 둘 다 center 즉, 가운데로 정해줬습니다.

 

*이미지가 잘려서 그런데 저 위치가 가운데입니다.

 

---

 3.  사이즈 정해주기 

p{ width:91px; height:94px; }

p태그는 block태그라 위치를 가운데로 하면 원하는 위치에 두기가 힘듭니다.

이럴 때는 사이즈를 직접 지정하는 방법이 있습니다.

 

저는 배경 이미지 사이즈와 동일하게 맞췄습니다.

 

제가 하는 코딩은 모두 한 가지 방법일 뿐이고 다른 방법도 여러 가지가 있으니 많은 도전을 해보세요~

 

---

그럼 이만.

총총.