[TIL] 배경 이미지 전체 채우기와 고정하기

  <style>

 

    body {

    background-image: url(https://images.freeimages.com/images/large-previews/529/nature-1492826.jpg);

    background-repeat: no-repeat;

    background-size: cover;   

}

 

  <style>

 

위에 처럼 작성하면 전체 창 크기에서는 이미지가 화면 전체에 채워지지만

창 크기를 축소하면 아래 사진처럼 화면 하단에 공백이 생긴다.

 

화면 축소 시 공백이 생긴다.

 

이미지를 중복없이 화면을 채우기 위해서는 

background-attachment: fixed; 태그를 적용하면 된다.

이 태그는 스크롤이 생겨 이동 시에도 배경화면이 고정되어 웹페이지를 깔끔하게 연출 할 수 있다.

 

  <style>

 

    body {

    background-image: url (배경이미지.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

}

  </style>

화면 크기를 축소해도 공백이 없다.