background-position

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

background-position 은 배경그림의 위치를 설정합니다.
키워드와 수치등으로 지정할 수 있습니다.

예제 1
키워드로 지정하는 방법 : 9개의 방향 키워드
보기


center


top

right top

right

right bottom

bottom

left bottom

left

left top
소스
<style type="text/css">
    .css_test {
        background-image : url('http://superkts.pe.kr/images/helper/huk.gif');/* 배경이미지 */
        background-repeat : no-repeat;/* 배경이미지 반복형태 */
        border : 3px solid gray;/* 테두리설정 */
        color : blue;/* 글자색 */
        font-weight : bold;/* 글자굵기 */
        height : 90px;/* 높이 */
        padding-top : 30px;/* 안쪽 위 여백 */
        text-align : center;/* 글자 정렬 */
        border-radius : 5px;
    }
</style>

<div class="css_test" style="background-position:center;"><br><br>center</div>
<div class="css_test" style="background-position:top;"><br>↑<br>top</div>
<div class="css_test" style="background-position:right top;">↗<br>right top</div>
<div class="css_test" style="background-position:right;">→<br>right</div>
<div class="css_test" style="background-position:right bottom;">↘<br>right bottom</div>
<div class="css_test" style="background-position:bottom;">↓<br>bottom</div>
<div class="css_test" style="background-position:left bottom;">↙<br>left bottom</div>
<div class="css_test" style="background-position:left;">←<br>left</div>
<div class="css_test" style="background-position:left top;">↖<br>left top</div>
설명
- 키워드로의 사용은 background-position : 키워드 ;
- 위 예제안의 키워드를 사용하면 됩니다.
예제 2
실습 - 한번 해봐야 겠죠?
보기
위치
background-position :
background-position : left top
설명
- 한번 해보셔야 해용
- 위 예제는 background-repeat : no-repeat (배경반복 안함)로 설정되어 있습니다.
- 참고 : background-repeat 배경이미지 반복 CSS
예제 3
실습 - 1개의 속성값 조절하기 (px값)
보기
background-position :
100px
background-position : 100px
CSS 공작소
설명
- 한개의 px 값을 사용한 예제입니다.
- background-position : 100px 처럼 사용합니다.
- 이때 배경 위치는 세로로 중간, 그리고 입력된 값에 따라 좌우로 위치합니다.
예제 4
실습 - 2개의 속성을 % 수치로 조절하기
보기
background-position :
0
0
 
CSS 공작소
설명
- background-position : left top ;

- background-position : 50% 50% ; = 정가운데
- background-position : 100% 0 ; = 오른쪽 위
- background-position : 0 100% ; = 왼쪽 아래
- background-position : 100% 100% ; = 오른쪽 아래
연구 1
background-position : center 일때 배경이미지 위치 변화 보기
보기
정 가운데 있는 얼굴을 주목해 주세요 !
width :
300px
height :
300px
설명
슬라이더를 움직여 보세요 ^^
- 가운데를 기준으로 이미지를 위치시키고 반복합니다.
연구 2
background-position : left top 일때 배경이미지 위치 변화 보기
보기
왼쪽 위에 있는 얼굴을 주목해 주세요 !
width :
300px
height :
300px
설명
- 왼쪽위 기준으로 위치시키고 반복됩니다.
- 이 두개만 예제로 하겠습니다. ^^;
연구 3
잠시 놀아보기 (jQuery 로 CSS 제어하기)
보기
소스
<div id="css_test" style="background-image:url('http://superkts.com/img/css/bg0426.gif'); height:400px; background-position:0; border-radius:10px;"></div>
<div class="mt5">
    <button type="button" onclick="$('#css_test').stop().animate({'background-position':'+=500'}, 3000)">검은말 전진</button>
    <button type="button" onclick="$('#css_test').stop().animate({'background-position':'-=500'}, 3000)">흰말 전진</button>
</div>
사용된 CSS (클릭시 보기) : background-imagebackground-positionborder-radiusheight
설명
버튼을 눌러 보세요 ^^

- 제이쿼리(jQuery)를 이용하여 자바스크립트로 만들어 보았습니다.
- background-position 의 값을 조절하여 부드럽게 움직이게 합니다.
- 혹시 "제이쿼리 공작소" 를 운영하게 된다면 많은 예제를 올리도록 노력하겠습니다. ^^;
연구 4
달려라 강아지 - 제이쿼리로 배경제어
보기
소스
<style type="text/css">
    .css_test {
        background-image : url('http://superkts.com/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 에서 보실 수 있습니다.

연구 5
공포체험 - 깜놀, 심쿵 주의 !!! 절대 주의 !!! (CSS 로 무섭게 하기 예제)
보기
약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!
소스
<style type="text/css">

    #css_test {
        background-color : black;
        background-repeat : no-repeat;
        height : 550px;
        border-radius : 10px;
    }

    #css_test.ghost1 {
        background-image : url('http://superkts.com/img/css/ghost.gif');
        background-position : 50% 50%;
        background-size : 0;
    }

</style>

<script type="text/javascript">

    var chk = false;

    function ghostIn(){
        if(chk) return;
        chk = true;
        $('#css_test').stop().animate({'background-size':'+=80%'}, 500, ghostOut);
    }

    function ghostOut(){
        $('#css_test').stop().animate({'background-size':'-=80%'}, 5000, ghostEnd);
    }

    function ghostEnd(){
        chk = false;
    }

</script>

<div class="bold red ac pd5">약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!</div>
<div id="css_test" class="ghost1"></div>
<div class="mt5 ac">
    <button type="button" onclick="ghostIn()">준비됬으면 누르세요 !</button>
</div>
설명
- 제이쿼리와 관련된 예제로 "제이쿼리 공작소" 오픈후에 다루겠습니다 !!
- 공포 수위 조절 했는데 적절한지 모르겠네요 ^^;

☞ 전 체 화 면 버 전 ☜
+ 관련 CSS +