CSS #2 Backgrounds

Backgrounds

🔎 배경에대해  조금 더 알아봅시다.

 

• Color opacity
  : 불투명도 0.0 ~ 1.0의 수치로 조절이 가능합니다. rgba를 이용하여 RGB 값에 opacity를 추가할 수 있습니다.

div {
	background: rgba(0, 128, 0, 0.3) 
}
/* Green background with 30% opacitvy */

 

• image : background요소에 이미지를 사용하게 해줍니다.

body {
	background-image: url("img.jpg");
}
/* 이미지를 사용할 때에는 텍스트와 밸런스를 잘 조절해야합니다.! */

 

• Repeat : Background-image는 기본값으로 수직과 수평으로 계속 반복되게 설정 되어있습니다. 이미지에 따라 수직과 수평을 조절할 필요가 있는데 그때 repeat 내용을 설정할 수 있습니다.

background-image: url("img_tree.png");

background-repeat

 

다음과 같이 가로축 세로축으로 이미지가 계속 반복됨을 볼 수 있습니다.

background-image: url("img_tree.png");
  background-repeat: repeat-x;
}

repeat-x를 할 경우 x축 즉 가로축으로만 반복됨을 확인 할 수 있습니다.

background-repeat: repeat-x;

background-image: url("img_tree.png");
  background-repeat: repeat-y;
}

repeat-y의 경우 세로축으로 반복됨을 확인 할 수 있습니다.

background-repeat: repeat-y;

 

• Attachment : 백그라운드의 이미지를 scroll / fixed를 통해서 고정시키지 않거나 고정시킬 수 있습니다. scroll을 사용할 경우 일반적인 사용 방식과 비슷하지만 fixed를 사용할 경우 스크롤을 이동하여도 이미지는 정해진 위치에 계속 고정됩니다.
• Position : 백그라운드 이미지의 위치를 지정해줍니다.
  
  
• Shorthand : 
  각각의 property값들을 한번에 적용할 수 있는 방법입니다.

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

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

 

 

참고 : 

https://www.w3schools.com/css/css_background.asp

CSS Backgrounds