- 키워드로의 사용은 background-position : 키워드 ;
- 위 예제안의 키워드를 사용하면 됩니다.
background-position
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
background-position 은 배경그림의 위치를 설정합니다.
키워드와 수치등으로 지정할 수 있습니다.
예제 1
키워드로 지정하는 방법 : 9개의 방향 키워드
보기
center
↑
top
↗
right top
right top
→
right
right
↘
right bottom
right bottom
↓
bottom
bottom
↙
left bottom
left bottom
←
left
left
↖
left top
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>
.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>
사용된 CSS (클릭시 보기) :
background-imagebackground-positionbackground-repeatborderborder-radiuscolorfont-weightheightpadding-toptext-align
설명
예제 2
실습 - 한번 해봐야 겠죠?
보기
| 위치 | |
|---|---|
| background-position : | |
|
background-position : left top
|
|
설명
- 한번 해보셔야 해용
- 위 예제는 background-repeat : no-repeat (배경반복 안함)로 설정되어 있습니다.
- 참고 : background-repeat 배경이미지 반복 CSS
- 위 예제는 background-repeat : no-repeat (배경반복 안함)로 설정되어 있습니다.
- 참고 : background-repeat 배경이미지 반복 CSS
예제 3
실습 - 1개의 속성값 조절하기 (px값)
보기
설명
- 한개의 px 값을 사용한 예제입니다.
- background-position : 100px 처럼 사용합니다.
- 이때 배경 위치는 세로로 중간, 그리고 입력된 값에 따라 좌우로 위치합니다.
- background-position : 100px 처럼 사용합니다.
- 이때 배경 위치는 세로로 중간, 그리고 입력된 값에 따라 좌우로 위치합니다.
예제 4
실습 - 2개의 속성을 % 수치로 조절하기
보기
설명
- background-position : left top ;
- background-position : 50% 50% ; = 정가운데
- background-position : 100% 0 ; = 오른쪽 위
- background-position : 0 100% ; = 왼쪽 아래
- background-position : 100% 100% ; = 오른쪽 아래
- background-position : 50% 50% ; = 정가운데
- background-position : 100% 0 ; = 오른쪽 위
- background-position : 0 100% ; = 왼쪽 아래
- background-position : 100% 100% ; = 오른쪽 아래
연구 1
background-position : center 일때 배경이미지 위치 변화 보기
보기
정 가운데 있는 얼굴을 주목해 주세요 !
설명
슬라이더를 움직여 보세요 ^^
- 가운데를 기준으로 이미지를 위치시키고 반복합니다.
- 가운데를 기준으로 이미지를 위치시키고 반복합니다.
연구 2
background-position : left top 일때 배경이미지 위치 변화 보기
보기
왼쪽 위에 있는 얼굴을 주목해 주세요 !
설명
- 왼쪽위 기준으로 위치시키고 반복됩니다.
- 이 두개만 예제로 하겠습니다. ^^;
- 이 두개만 예제로 하겠습니다. ^^;
연구 3
잠시 놀아보기 (jQuery 로 CSS 제어하기)
보기
소스
<div id="css_test" style="background-image:url('/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>
<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>
설명
버튼을 눌러 보세요 ^^
- 제이쿼리(jQuery)를 이용하여 자바스크립트로 만들어 보았습니다.
- background-position 의 값을 조절하여 부드럽게 움직이게 합니다.
- 혹시 "제이쿼리 공작소" 를 운영하게 된다면 많은 예제를 올리도록 노력하겠습니다. ^^;
- 제이쿼리(jQuery)를 이용하여 자바스크립트로 만들어 보았습니다.
- background-position 의 값을 조절하여 부드럽게 움직이게 합니다.
- 혹시 "제이쿼리 공작소" 를 운영하게 된다면 많은 예제를 올리도록 노력하겠습니다. ^^;
연구 4
달려라 강아지 - 제이쿼리로 배경제어
보기
소스
<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_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>
설명
- 애니메이션 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('/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_test {
background-color : black;
background-repeat : no-repeat;
height : 550px;
border-radius : 10px;
}
#css_test.ghost1 {
background-image : url('/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 (클릭시 보기) :
background-colorbackground-imagebackground-positionbackground-repeatbackground-sizeborder-radiusheight
설명
+ 관련 CSS +
- background배경색, 배경그림과 관련된것을 설정합니다
- background-attachment배경이미지의 고정 방법을 설정합니다
- background-clip배경색, 배경그림의 위치 기준을 지정합니다
- background-color배경색을 지정합니다
- background-image배경 이미지를 설정합니다
- background-origin배경그림의 시작위치를 설정합니다
- background-position배경이미지의 위치를 설정합니다
- background-repeat배경이미지의 반복형태를 설정합니다
- background-size배경이미지의 크기를 설정합니다