[블로그 꾸미기] 배경 사진이 있는 글 상자 서식 만들기

예전에 포스팅했던 글 상자 만들기 포스팅에 이어서 이번에는 배경 사진이 들어가 있는 글 상자를 만들어 보려 한다. 이번에 만들 글 상자는 업그레이드 버전이라고 할 수 있는데, 예쁜 블로그 글 쓰기에 굉장히 도움이 되므로 관심 있는 사람이라면 꼭 참고하길 추천한다. 기본적인 글 상자 만드는 법부터 알고 싶다면 아래 글 상자에 첨부한 글을 읽어 보았으면 좋겠다.

 

깔끔하고 예쁜 포스팅을 위한 글상자 만들기

 

🔺위의 글 상자처럼 바탕에 사진이 깔린 글 상자를 만드려면 기존 글 상자 코드에서 백그라운드 항목을 추가해야 한다.

 

 

background: url('사진의 이미지 주소') no-repeat center center; background-size: cover;

 

배경으로 하고 싶은 사진을 미리 블로그에 올려 놓고 이미지 주소를 복사해 url이 들어갈 자리에 붙여넣기한 다음 사진이 반복되지 않게 하고 수평, 수직 위치에 맞추기 위해 no-repeat center center 를 입력한다. 그리고 사진을 글 상자에 꽉 채우기 위해 background-size: cover 를 입력하면 된다.

 

만약 no-repeat center center 를 입력하지 않는다면 이미지가 글 상자 안에서 반복되어 보이게 되고 (마치 컴퓨터 바탕화면 바둑판식 배열같이;) background-size: cover 를 입력하지 않으면 사진의 양 끝쪽이 채워지지 않아 잘린 것처럼 보이게 된다.

 

---

 

일일히 입력할 필요 없이 이미지 주소만 바꿔서 쓸 수 있도록 서식으로 저장한다.

 

너무 귀엽다..🤍

 

GIF도 배경으로 넣을 수 있다. (그래도 글 용량을 생각해서 조금씩만 써야 할 것 같다)