CSS background

가장 많이 사용되는 background 속성에 관한 글입니다.

이 부분부터는 외워야 할 내용이 생기게 됩니다.

여태까지 내가 했던 방법은 html에 직접 <img src = ""> 이 방법이다.

이 글에서는 이 방법이 아니라 css를 통해서 이미지를 넣는 것을 해보겠습니다.

우선 background 이미지를 넣어주고 싶은 곳에

background-image : url(""); 이라는 것을 써줍시다.

이 background-image와 url는 햄버거 세트에서 햄버거와 콜라처럼 떨어질 수가 없는 조합입니다.

background만 쳤을 때 origin , color 등등 여러가지가 나오던데 이 부분은 나중에 알아보겠습니다.

이렇게 작성을 하고 적용을 해보니까 이미지 크기가 너무커서 배경이 잘 안보인다..

그래서 크기는 size니까 size에서 값을 정해주면 괜찮아지지 않을까! 해서 이것 저것 해보았다.

auto는 입력을 안해줬을 때와 동일하고 contain은 이미지 크기를 작게해서 여러개가 한번에 보이게 되고

cover는 화면 안에 가득 차게 보이게 해줘서 짤리는 부분도 있다.

contain 예제.. 눈아프다

여러개 뜨는게 보기가 싫어서 no-repeat으로 반복을 제거해주니 background라고 하기 민망해질 정도로 작아졌다.

size에는 저런 키워드 말고 px 크기를 직접 정해줄 수가 있다. 그리고 position을 통해서

image에 어느 부분을 보이게 할지도 정할 수가 있습니다.

background에서 중요한 4가지이니 기억해두는게 좋습니다.

위 사진과 같이 코드를 작성을 하면 아래와 같은 웹페이지가 보이게 됩니다.

이렇게 해도 짤리게 되는데 이미지의 크기때문이라 어쩔 수가 없습니다..

html에서 <br>을 많이 쓰게 되면 스크롤이 생기면서 background의 위치가 변하게 되는데 이것을

고정시킬 수 있습니다 바로 background-attachment: fixed를 써주면 됩니다. 고정하겠다는 의미입니다.