CSS 백그라운드 이미지 설정하기

CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다.

CSS 백그라운드 이미지 속성 과 속성값 설정 방법은 

background-image  : url("이미지 경로");

입니다. 

background-image의 예시를 만들어봅니다.

Internal CSS 방식으로 <style> 섹션에 body 선택자의 백그라운드 속성을 선언 합니다.

  <title>BackGround</title>
    <style>
      body{
         background-image: url("images/withCoffee.jpg");  
         }      
    </style>
</head>

결과는 하기와 같습니다.  기본적으로 배경이미지는 X축과 Y축으로 반복되어져서 그려집니다.

background-repeat : no-repeat ,  repeat-x, repeat-y

반복되지 않고 하나만 그려주기 위해서는 하기 속성을 추가 합니다.

   background-repeat: no-repeat;

해당 속성값에 의해서 이미지는 하나만 설정이 됩니다.

하나만 설정된 이미지

X축과 Y축만 반복되게 이미지를 설정하고 싶을때는 repeat-x, repeat-y 값을 설정합니다.

     background-repeat: repeat-x;

 background-repeat: repeat-y;

background-position 

no-repeat 와 background-position 속성을 사용해서 이미지 위치를 변경 할 수 도 있습니다.

 background-repeat: no-repeat;

 background-position: right top;

 

오른쪽 상단에 위치한 이미지

 

background-position 의 속성값들은 외우지 말고, background-position property 등으로 웹에서 검색하면 여러문서가 나오기에 해당 속성값들을 상황에 맞게 적용하면 되겠습니다.

CSS background-position property

background-attachment 

background-attachment 속성은 백그라운드 이미지를 스크롤 할지 고정할지를 명시하는 역할을 합니다.

속성값인 fixed 와 scroll 에 따라 이미지가 고정 혹은 스크롤이 됩니다. 해당 속성값을 설정하지 않으면 기본적으로 마우스 스크롤시 이미지가 같이 스크롤이 됩니다.

스크롤시 이미지가 스클롤됨 - 기본값

   background-attachment: fixed;

fixed 속성값 설정시 스크롤 하여도 이미지는 해당 위치에 고정됩니다.

CSS 백그라운드 이미지 속성값을 설정하는 방법과 백그라운드 주요 속성들을 정리해 보았습니다.

해당 내용은 W3 school 내용을 참고했습니다. 

자세한 사항은 하기 영문 사이트를 봐주세요. 감사합니다.

CSS Background Image