반응형



    <body>에 배경화면을 쓰는 경우에 대한 팁입니다.

    body에 background속성으로 배경화면을 넣는 경우 본문을 스크롤 할 때 배경화면도 함께 스크롤 됩니다.

    본문을 스크롤 하더라도 배경화면을 고정하고 싶은 경우 사용할 수 있는 방법입니다.



    .


    고정 배경 이미지 적용하기

    HTML/CSS편집 - Style.css에 다음을 추가하시면 됩니다.
    ※이 방법을 사용하게 되면 IE7 이하에서는 배경화면이 보이지 않게됩니다.

    body:before{

      content:"";

      position:fixed;

      top:0;right:0;bottom:0;left:0;

      background:#fff url('./images/bg.jpg') top;

      background-size: contain;

      background-repeat:no-repeat;

      z-index:-1;

    }

    background 뒤의 #fff는 배경 이미지의 나머지 부분에 적용될 색상입니다.

    url('~~') 부분에 배경으로 쓸 이미지의 url을 넣으면 됩니다. (HTML/CSS편집에서 업로드한 파일은 위와 같이 './images/파일이름'으로 쓸 수 있습니다.)

    경우에 따라 backgound-size나 repeat속성 또한 조절해줍니다. 사용가능한 속성 예제는 여기서.


    배경이미지가 보이지 않거나 기존 배경 이미지가 있는경우,

    style.css에서 body 혹은 html로 검색했을 때, 중괄호 { }안에 background속성이 있는 경우 해당 속성을 삭제해주어야 제대로 표시됩니다.

    혹은 다음 줄을 css 마지막에 추가합니다.

    html,body{background:none!important}



    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함