배경이미지 다양하게 활용하기
클릭을 해보니 어떠신가요?~
예상을 뒤집는 색다른 느낌 때문에
원치않는 엉뚱한 곳으로 끌려 들어간 느낌인가요?~
이 페이지는 회원님께서 열람을 선택하신 페이지가 맞습니다.~ 히히~
게시글을 작성하다 보면
때로는 평소와 다른 신선한 변화를 주고싶을 때가 있지만
뭘 딱히 신선하게 변화를 준다는 게 궁할 때가 있지요.~
그럴 때, 배경이미지를 활용해서
고정적인 패턴을 벗어나 다양한 연출이 가능하다는 걸 알려드립니다.
견본을 놓고 설명을 드리겠습니다.~
이 페이지는
세 군데 영역에 각각 별도로 표시되는 배경이미지를 깔았습니다.
그 첫째는
타이틀 영역에 에반이라는 닉을 가진 영화배우 사진을
가로로 반복해서 표시되게 깔았고요.~ 헤헤헤~
<style>
#titlebackground, {background-image: url( https://t1.daumcdn.net/cfile/cafe/230E644E52AC0B931E );
background-attachment: scroll; background-repeat: repeat-x ; background-position: top left ;}
</style>
그 둘째는
화면 좌측에 있는 메뉴바 영역에 운치있는 배경이미지를 하나 깔았습니다.
<style>
#cafemenu, { background-image: url( https://t1.daumcdn.net/cfile/cafe/172D6C424E33316932 );
background-attachment: fixed; background-repeat: repeat-y ; background-position: top 10px ;}
</style>
그리고 셋째는
게시글이 표시되는 영역에 준경님께서 최근 보급하신 배경이미지를 하나 깔았습니다.
<style>
.cb { background-image: url( https://t1.daumcdn.net/cfile/cafe/240BEF3653C4BB0A0C );
background-attachment: fixed; background-color:#ffffff;
background-repeat: repeat-x ; background-position: bottom right ;}
</style>
그리고나서 화면을 관찰해보니 부족함이 있었습니다.
설명제공용 화면이라는 용도상 각 영역의 표시가 뚜렸하지 않았습니다.
해서 body 에다 색깔을 넣었는데,
넣고보니 다소 밋밋해서 음탕 아니 음침한 색깔로 그라데이션 처리를 하고나니
나름 각각의 영역표시가 뚜렸해졌습니다.~
<style>
body,
{filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#dddddd, dColorStr=#000000 )' ;}
</style>
이런 기법들을 일상의 따분함을 벗는 수단으로 활용해서
변화하는 자신을 표현해 보세요.~ 우히히~ ~ (^.^)
'지식·컴퓨터 관리' 카테고리의 다른 글
G (0) | 2016.08.23 |
---|---|
[스크랩] 시시한 이야기 (0) | 2015.11.18 |
[스크랩] 완전 초보 (블로그에서 MP3 파일 계정받아서 카페에 노래 올리는 방법,) (0) | 2015.02.23 |
[스크랩] 알려주세요 (0) | 2015.01.16 |
[스크랩] Re:연속재생할수있는방법& 소스 입니다 (0) | 2014.01.16 |