CSS 다양한 배경이미지 사용으로 감각적인 첫화면 만들기

맘에 드는 여러개의 이미지를 찾았는데, 그걸 배경화면에 다 넣어보고 싶다면? 가능할까요?

backgroud-image를 이용하면 가능하더랍니다! 넣고싶은 이미지의 url을 연결해서 컴마로 쭉 써주기만 하면 끝!

그리고 각각 이미지의 크기와 위치를 조정해주기만 하면 되요. 

 

 

연습용으로 처음 만들어본 저만의 웹페이지 입니다. 요즘 코로나니 뭐니 해서 건강해져 보려고 주스를 만들어 먹고 있는데, 일명 '부스터 주스'라는, 그걸 주제로 웹사이트를 만들어 보고 있습니다. 

 

아무튼, 우여곡절 끝에 헤더를 만들어놓긴 했는데, 배경색인 salmon을 더 돋보이게, 그리고 웹사이트가 주스에 대해서 알리고자 한다는 것을 더 효과적으로 사용할 순 없을까요?

 

무료 사진 공유 사이트에서 눈여겨 봤던 주스에 관련된 이미지를 찾아봤습니다. 다음과 같은 두 가지 사진이 녹색을 띠고 있으니 살구색과 대비되면서 더 색감이 예쁜 화면이 될 거 같습니다. 또한 제가 마시고 있는 주스가 녹색을 띠고 있기도 하니 주제와 딱 맞는 이미지 인거 같아요. 

 

 

그렇다면 이제 CSS작업을 해야겠죠? 배경화면 색을 지정했던 header를 찾습니다. 그리고 배경화면에 이미지를 추가할 수 있는 background-image를 작성합니다. 기본 작성 형태는 다음과 같습니다.

 

header{     background-image: url( ); }

 

 

url( )의 괄호 안에 이미지의 파일명을 작성하시면 됩니다. 저같은 경우는 bg.jpg와 juice.jpg이므로 각각을 위 형태에 맞게 작성해 봅니다. 그리고 원본 이미지는 화면에 아마 꽉 차게 나타날 테니 미리 사이즈도 줄여서 400px, 400px로 우선 조정해 줍니다. 

header {     background-image: url(background-image: url(bg.jpg), url(juice.jpg);     background-size: 400px, 400px; }

그리고 나서 웹 페이지를 새로고침 해 봅니다.

 

 

으앗... 그런데 이렇게 바둑판 모양으로 배경설정 한 것과 같이 이미지가 반복되어서 나타납니다. 이것도 뭐 나쁘진 않은데, 이미지를 두개가 보이도록 바꿔야 할 거 같습니다. 그래서 이번에 추가할 것은 no-repeat입니다.

 

header {     background-image: url(background-image: url(bg.jpg), url(juice.jpg);     background-size: 400px, 400px;     background-repeat: no-repeat; }

 

 

하..... 여전히 제가 원하는 모습이 아니네요. 두 이미지가 나란히 한 곳에 있고, 사이즈도 다시 조정해야 할 거 같아요. 사실 더 정보를 찾아보니 background-image는 기본값이 왼쪽-위에 이미지가 놓이도록 하는 것이라고 합니다. 그래서 지금 이미지 위치에 대한 아무 설정도 하지 않은 상태에서는 자동적으로 왼쪽-위에 이미지가 뜨는 것이라고 할 수 있겠네요. 

 

그래서 다시 각 이미지가 배치되면 좋을 곳으로 위치를 설정해줍니다. 이 때는 background-position: 을 사용해서, 이미지 링크 순서에 따라서 원하는 위치에 맞게 left, right, top, bottom을 각각 사용해서 또는 복합적으로 사용해 줍니다.

 

header {     background-image: url(background-image: url(bg.jpg), url(juice.jpg);     background-size: 400px, 400px;     background-repeat: no-repeat;     background-position: top, bottom right; }

 

 

첫 번째 url이 가운에 있는 bg.jpg이고 오른쪽 아래에 있는 이미지가 juice.jpg 입니다.

이미지의 위치에 대해서 잠깐 더 설명을 하자면, 첫 번째 이미지는 top으로만 설정한 상태입니다. 위에서 보는 것과 같이화면의 중앙에 위치해 있습니다. 기본이 왼쪽-위 이므로 위에 위치하되 가운데로 이동하게 되었네요. 가운에 떡하니 자리를 잡고 있으니 위풍당당해 보이나 역시 제가 원하는 위치는 아니네요.... left top으로 설정해 보도록 하겠습니다. 그리고 이미지 사이즈도 더 키워보도록 하겠습니다.

 

 

header {     background-image: url(background-image: url(bg.jpg), url(juice.jpg);     background-size: 400px, 400px;     background-repeat: no-repeat;     background-position: left top, bottom right; }

 

position에 left top으로 설정을 다시 변경했습니다. 실험해 본 결과, top left든 left top이든 차이는 없습니다. 위치의 조합은 left, right, top, center, bottom, top left, top right, bottom right, bottom left, center left, center right를 사용해서 위치를 조정해주시면 될 거 같아요. 

 

 

짜잔-! 이렇게 두 이미지를 배경에 함께 배치하는 작업이 완료되었습니다! 지정한 배경색은 가장 마지막에 나타나고 추가한 이미지가 그 위로 나타난다는 점도 다시한번 강조드려요~ 

 

 

(위의 이미지는 unsplash에서 사용하였습니다 :-))