CSS Background

Table of contents

1. Background Properties
   1. Background
   2. background-color
   3. background-image
   4. background-repeat
   5. background-attachment
   6. background-position
   7. background-size
   8. background-clip
   9. background-origin
2. Background Decoration
   1. Linear Gradients
   2. Radial Gradients
      1. Web Gradient Generator Site
   3. Full Size Background Image
3. Similar property
   1. Opacity

Background Properties

Background

Shorthand

background: color image repeat attachment position 순서로 진행

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

background-color

배경 색상 지정

body {
    background-color: red;
}

background-image

배경 이미지 지정

▸ 하나 이상의 이미지를 사용할 수 있음

▸ 제일 먼저 선언한 이미지가 제일 앞에 나옴

body {
  background-image: url("paper.gif");
}

/*2개 이상의 이미지 겹쳐서 사용하기*/
body {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

or

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-repeat

배경 반복하기

• repeat : 기본값

• repeat-x : 수평 반복(가로로 길어짐), horizontally

• repeat-y : 수직 반복(세로로 길어짐), vertically

• no-repeat : 한번만 출력

background-repeat: repeat   
background-repeat: repeat-x   
background-repeat: repeat-y   
background-repeat: no-repeat 

background-attachment

배경의 고정 유무

• fixed : 고정됨, 스크롤 영향 X

• scroll : 고정안됨, 스크롤 영향 O

background-attachment: fixed   
background-attachment: scroll  

background-position

배경 이미지의 위치

좌 / 우 방향으로 움직임, left center right/ top center bottom

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

background-size

배경 이미지의 크기를 지정

• contain : 배경이 비율에 맞춰 꼭 콘텐츠 내부에 들어가야 하는것, 컨텐츠 배경이 보일 수 있음

• cover : 콘텐츠 내부에 꽉차게 하는것, 배경이 잘릴수도 있음

▸ 여러 배경 이미지를 동시에 정의할 수 있음

background-size: px px; or %   // 이미지를 작거나 크게 만들 때 
background-size: contain
background-size: cover         // entire element is always covered

/*동시에 정의하기*/
#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

background-clip

배경의 부분을 색칠하기

• border-box : painted to the outside edge of the border (default)

• padding-box : painted to the outside edge of the padding

• content-box : painted within the content box

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

W3C Example

background-origin

배경 이미지가 어디에 위치할 것인지

• border-box : the background image starts from the upper left corner of the border

• padding-box : the background image starts from the upper left corner of the padding edge (default)

• content-box : the background image starts from the upper left corner of the content

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

W3C Exmaple

Background Decoration

Linear Gradients

goes down/up/left/right/diagonally 으로 가는 그라데이션

▸ background-image 속성을 사용해서 지정함

▸ 최소한 2개의 색상을 지정해야함

▸ 시작지점이나 각도를 조정할 수 있음 (top to bottom is default)

Syntax

예제

• Top to Botoom

  #grad {
    background-image: linear-gradient(red, yellow);
  }
  

• Left to Right

  #grad {
    background-image: linear-gradient(to right, red , yellow);
  }
  

• Diagonal

  #grad {
    background-image: linear-gradient(to bottom right, red, yellow);
  }    
  

• Angles

  #grad {
    background-image: linear-gradient(-90deg, red, yellow);
  }
  

• Multiple Color Stops

  
  

  #grad {
    background-image: linear-gradient(red, yellow, green);
  }
  
  #grad {
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
  }
  

• Transparency

  #grad {
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  }
  

• Repeating a linear-gradient

  #grad {
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
  }
  

Radial Gradients

가운데에서 시작하는 그라데이션

최소한 2개이상 색상을 지정해야함

Syntax

예제

• Evenly Spaced Color Stops

  default

    #grad {
      background-image: radial-gradient(red, yellow, green);
    }
  

• Differently Spaced Color Stops

    #grad {
      background-image: radial-gradient(red 5%, yellow 15%, green 60%);
    }
  

• Circle Shape

  완벽한 원형의 그라데이션, 기본은 ellipse(타원형)

    #grad {
      background-image: radial-gradient(circle, red, yellow, green);
    }
  

• Repeating a radial-gradient

    #grad {
      background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
    }
  

Web Gradient Generator Site

Ultimate CSS Gradient Generator

CSS matic Gradient Generator

Full Size Background Image

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

Similar property

Opacity

투명도

▸ 0 완전투명 - 1 완전 불투명

opacity: 0.3

!Note