background-attachment

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

background-attachment 는 배경그림의 스크롤 방법을 지정합니다.

예제 1
background-attachment 의 속성 개요 (각 스크롤바 그리고 화면을 스크롤해 보세요)
보기
각각의 스크롤바를 움직여 보세요. 그리고 화면도 스크롤해 보세요.
scroll
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소
fixed
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소
local
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소
소스
<style type="text/css">
    .css_test {
        background-image : url('/img/css/bg0697.jpg');
        border : 1px solid black;
        display : inline-block;
        font-weight : bold;
        height : 400px;
        line-height : 150px !important;
        overflow : auto;
        text-align : center;
        width : 30%;
    }

    .css_test span {
        background : #fff;
        border-radius : 5px;
        padding : 15px;
    }
</style>
각각의 스크롤바를 움직여 보세요. 그리고 화면도 스크롤해 보세요.
<center>
    <div class="css_test" style="background-attachment:scroll;">
        <span>scroll</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
    </div>
    <div class="css_test" style="background-attachment:fixed;">
        <span>fixed</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
    </div>
    <div class="css_test" style="background-attachment:local;">
        <span>local</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
        <span>CSS 공작소</span><br>
    </div>
</center>
사용된 CSS (클릭시 보기) : backgroundbackground-attachmentbackground-imageborderborder-radiusdisplayfont-weightheightline-heightoverflowpaddingtext-alignwidth
설명
- scroll : 해당 영역의 이미지 고정(예제의 DIV에 적용한 경우 스크롤해도 배경고정)
- fixed : 전체 영역에서 이미지 고정(화면을 스크롤해도 배경 고정)
- local : 이미지 고정없이 같이 스크롤

위 예제는 DIV 에 배경으로 이미지를 넣고 각각 다르게 설정해본 예제입니다.
scroll 과 fixed 의 경우 DIV 내의 스크롤바를 움직였을 때와 화면을 스크롤했을 때를 비교해 보세요.

아직 어렵나요? 그럼 다음 예제를 보시죠 ^^
예제 2
실습 - 각각의 차이점을 확인해 보세요
보기
CSS 공작소
CSS 공작소
CSS 공작소
background-attachment :
background-attachment : fixed
설명
- fixed, scroll 설정일때 화면도 스크롤해 보면서 비교해 보세요.
연구 1
background-attachment : fixed 효과 보기 (Show Me The Money !!)
보기
background-attachment : fixed
Show Me The Money !!
CSS 공작소
소스
<style type="text/css">
    .css_test {
        background-attachment : fixed;
        background-image : url('/img/css/bg0372.gif');
        border-radius : 10px;
        border : 7px outset black;
        font-weight : bold;
        height : 400px;
        line-height : 400px !important;
        margin-bottom : 50px;
        text-align : center;
    }

    .css_test span {
        background : #fff;
        border-radius : 5px;
        font-size : 15pt !important;
        padding : 15px;
    }
</style>

<center>
    <div class="css_test">
        <span>background-attachment : fixed</span>
    </div>
    <div class="css_test">
        <span>Show Me The Money !!</span>
    </div>
    <div class="css_test">
        <span>CSS 공작소</span>
    </div>
</center>
사용된 CSS (클릭시 보기) : backgroundbackground-attachmentbackground-imageborderborder-radiusfont-sizefont-weightheightline-heightmargin-bottompaddingtext-align
설명
- 왠지 설레이는 배경그림 ^^;;
- 화면을 스크롤 해도 배경그림의 위치가 변하지 않아 묘하게 보입니다(?)
- 화면스크롤과 상관없이 배경이미지가 고정됩니다.

- 사실 이 문서 뒤에는 어마어마한 돈이 숨겨져 있지요...
연구 2
실습 - 보이지 않는 벽 (제이쿼리 + CSS background-attachment : fixed)
보기
보이지 않는 벽 보기

마우스로 드래그 해보세요 ^^
소스
<style type="text/css">
    .css_test {
        background-attachment : fixed;
        background-image : url('/img/css/smpt109.jpg');
        border-radius : 50%;
        color : white;
        cursor : move;
        font-size : 35pt !important;
        height : 500px;
        line-height : 500px !important;
        margin : 0 auto;
        text-align : center;
        text-shadow : 0 0 5px white, 0 0 15px white;
        width : 500px;
        z-index : 999;
    }
</style>

<div class="css_test">보이지 않는 벽 보기</div>
<br>마우스로 드래그 해보세요 ^^

<script type="text/javascript">
    $( ".css_test" ).draggable(); // 드래그 할 수 있도록 만든다
</script>
사용된 CSS (클릭시 보기) : background-attachmentbackground-imageborder-radiuscolorcursorfont-sizeheightline-heightmargintext-aligntext-shadowwidthz-index
설명
- 보이지 않는 벽을 보이게 만들어 주는 녀석입니다.
- background-attachment : fixed 와 제이쿼리UI draggable 를 이용한 예제입니다.
- "제이쿼리 공작소" 오픈 후 다루겠습니다 ^^;
- 적절한 CSS 와 제이쿼리를 사용하여 굉장히 간단한 소스로 구현이 되었습니다.
연구 3
달리는 강아지 - 제이쿼리로 배경제어
보기
소스
<style type="text/css">
    .css_test {
        background-image : url('/img/css/dogs.gif');
        background-repeat : repeat-x;
        height : 100px;
    }
</style>

<div class="css_test"></div>

<script type="text/javascript">

    function css_test(){
        $('.css_test').css({'background-position':'-=1'}); // 배경이미지를 왼쪽으로 1px 씩 계속 움직임
    }
    setInterval(css_test, 10);

</script>
사용된 CSS (클릭시 보기) : background-imagebackground-repeatheight
설명

- 애니메이션 GIF 파일과 CSS 배경그림설정 그리고 jQuery 를 이용하여 만들어 보았습니다.
- 강아지들이 귀엽네요 .. 마치 ..
- 소스는 엄청간단한데 효과는 만점이네요. 바로 이런거죠 ㅋ
- "제이쿼리 공작소" 를 오픈하게 되면 다루도록 하겠습니다.

※ 이 예제에 대한 강좌는 http://biketago.com/ev175 에서 보실 수 있습니다.

연구 4
실습 - 현재 문서에 적용해 봅시다 ( body 태그에 적용 )
보기
background-attachment :
설명
- 현재 문서에도 적용해 보겠습니다.
- fixed 일때는 화면을 스크롤해도 배경그림이 고정됩니다.
- scroll, local 은 같습니다.
- body 태그에 적용하였습니다. ㅇㅅㅇ;
+ 관련 CSS +
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소