<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 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon TwoThinks
      2014.08.05 06:05 신고

      감사합니다 덕분에 많은 도움이 됬습니다 ^^

    • BlogIcon 제법살만한세상
      2014.08.05 23:31 신고

      블로그도 잘 꾸며 놓으시고 좋은정보도 많이 포스팅해 두셨네요 ^^
      보잘것 없는 제 블로그에 방문해주셔서 감사해요~ ㅎ
      링크 걸고 서로 자주 왕래해요~ ㅎㅎ
      잘보고 갑니다~

      • BlogIcon 뭐하라
        2014.08.05 23:47 신고

        저도 좋은 정보 얻어갔는걸요~ 방문 감사드려요^^

    • BlogIcon CRISPR
      2014.08.06 17:37 신고

      뭐하라님 블로그 제목 ' 오류 발견해주셔서 감사합니다 ^^
      이번에 올려주신 포스팅대로 배경화면도 바꿔봐야겠네요~!

    • BlogIcon 미디어리뷰
      2014.08.09 15:36 신고

      앗 신기한 정보네요
      공감 누르고 갑니다

    • BlogIcon -_________-0
      2014.08.12 12:38 신고

      안그래도 고정배경사용하려고 했는데, 좋은 정보 얻었네요~ 감사합니다..^^

    • BlogIcon 이바구™
      2014.08.20 14:56 신고

      멋진 풍경 사진 넣으면 좋을 것 같네요.

    • BlogIcon 1001011110
      2015.07.06 13:04 신고

      도움 받고 갑니다! 감사해요!

티스토리 툴바