지식·컴퓨터 관리

[스크랩] 배경이미지 다양하게 활용하기

상상플러스s 2015. 4. 22. 23:08

 

배경이미지 다양하게 활용하기

 

클릭을 해보니 어떠신가요?~

예상을 뒤집는 색다른 느낌 때문에  

원치않는 엉뚱한 곳으로 끌려 들어간 느낌인가요?~  

이 페이지는 회원님께서 열람을 선택하신 페이지가 맞습니다.~ 히히~

 

게시글을 작성하다 보면

때로는 평소와 다른 신선한 변화를 주고싶을 때가 있지만

뭘 딱히 신선하게 변화를 준다는 게 궁할 때가 있지요.~

 

그럴 때, 배경이미지를 활용해서 

고정적인 패턴을 벗어나 다양한 연출이 가능하다는 걸 알려드립니다. 

 

견본을 놓고 설명을 드리겠습니다.~

 

이 페이지는

세 군데 영역에 각각 별도로 표시되는 배경이미지를 깔았습니다.

 

그 첫째는

타이틀 영역에 에반이라는 닉을 가진 영화배우 사진을

가로로 반복해서 표시되게 깔았고요.~ 헤헤헤~

<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>

 

 

이런 기법들을 일상의 따분함을 벗는 수단으로 활용해서

변화하는 자신을 표현해 보세요.~ 우히히~ ~ (^.^)  

출처 : 좋은글과 좋은음악이 있는곳
글쓴이 : 에반 원글보기
메모 :