웹프로그래밍/css

CSS 배경 스타일

zelkova 2014. 7. 27. 13:47

<목차로 돌아가기>


 속성

설명 

 background

 한 줄에서 모든 배경 속성을 정의한다. 

 background-attachment

 배경이미지가 고정되어 있는지 스크롤되는지
 지정한다. 

 background-color

 배경색을 지정한다.

 background-image

 배경 이미지를 정의한다.

 background-position

 배경 이미지의 시작 위치를 지정한다.

 background-repeat

 배경 이미지의 반복 여부를 지정한다.

 background-size

 배경이미지 크기를 조절한다.



배경색 지정하기

body를 선택자로 지정한 배경관련 스타일은 아래와 같이 적용할 수 있습니다.

주로 사용하는 CSS 색깔 속성은 아래와 같습니다.
HEX값 지정 방식 - #0000ff
RGB값 지정 방식 - "rbg(0,0,255)"
색깔 이름 지정 방식 - "blue"

  1. <html>
  2. <head>
  3. <style> 
  4.  body{
  5. background-color:#ddffdd;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <p>실험중 입니다.</p>
  11. </body>
  12. </html>


배경그림 지정하기

배경그림이미지는 기본적으로 배경을 반복되어 도배하는 속성을 가지고 있습니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. body {
  6.     background-image: url("bgimg.jpg");
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <p>실험중 입니다.</p>
  12. </body>
  13. </html>



배경그림 지정하기 - 가로, 세로반복


가로만 반복하거나 세로만 반복하도록 지정 할 수 있습니다. 아래의 예제는 가로복 입니다.  repeat-x 대신 repeat-y를 넣으면 세로반복이 됩니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. body {
  6.     background-image: url("bgimg.jpg");
  7. background-repeat: repeat-x;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>실험중 입니다.</p>
  13. </body>
  14. </html>



배경그림 지정하기 - 반복 제거


반복이 없게 설정 할 수도 있습니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. body {
  6.     background-image: url("bgimg.jpg");
  7. background-repeat: no-repeat;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>실험중 입니다.</p>
  13. </body>
  14. </html>


배경 그림 지정 - 반복없이 우측상단 정렬


반복없이 오른쪽 상단에 올리는 방법도 있지요 ^^

글을 쓸때 이미지가 겹치면 귀찮을 경우도 있지요? 이런경우를 위해서 위치를 살짝 옮겨봅시다.


  1. <html>
  2. <head>
  3. <style> 
  4. body {
  5.     background-image: url("bgimg.jpg");
  6. background-repeat: no-repeat;
  7. background-position: right top;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>실험중 입니다.</p>
  13. </body>
  14. </html>


배경 그림 지정 - 단축 속성 지정

위의 예제를 보면 많은 속성들을 고려해서 배경을 지정하는 것을 알 수 있습니다.

이 때문에 아래와 같이 약식으로 속성을 지정 할 수 있습니다.


  1. <html>
  2. <head>
  3. <style> 
  4. body {
  5.     background : #ffffff url("img_tree.png") no-repeat right top;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <p>실험중 입니다.</p>
  11. </body>
  12. </html>


반응형
저작자표시

'웹프로그래밍 > css' 카테고리의 다른 글

CSS 리스트 관련 스타일  (0) 2014.08.19
CSS 링크 관련 스타일  (0) 2014.08.11
CSS 삽입방법  (0) 2014.07.25
CSS선택자  (0) 2014.07.25
CSS - 메뉴 제작하기  (0) 2014.06.09

'웹프로그래밍/css'의 다른글

  • 현재글CSS 배경 스타일

관련글

티스토리툴바