Web 01 Part2. 웹문서의 배경이미지, 배경색

CSS는 웹문서의 다양한 디자인 속성을 반영해준다. 아래는 본문인 Body태그에 적용한 배경이미지와 배경에 대한 속성을 구분해보았다.  배경이미지의 속성인 background-image는 오직 이미지만 활용가능한 속성이다. 반면에 배경의 속성인 background는 단순한 배경색상 외에도 다양한 세부속성을 포함한 큰 개념으로 중복해서 사용하는 경우가 많다.

https://www.w3schools.com/cssref/css3_pr_background.php

W3Schools.com

 

https://pixabay.com/ko/users/winterflower-17292963/

위링크로 가서, 다운로드 없이 이미지 주소 복사로 이미지를 삽입해보세요.
아래는 flower 이미지경로는 픽사베이의 GIF이미지를 참고했다. 
배경색상은 파란색계열인 #b3e6ff;를 적용해 보았다.

 

html04.zip

1.40MB

 

---

 

◆CSS background-image Property 배경이미지, 배경색 기본속성 따로국밥

 

이미지와 색상을 따로 선언 / 배경이미지 경로, 배경색 / 이미지 전용과 배경이 따로 국밥처럼 별도 추가하여 번거롭다.   배경이미지가 투명배경이 아닌 GIF 혹은 JPG로 지정하고, 배경색상이 있는 경우에는 배경이미지는 안보일 수 있습니다.

body {
 background-image: url("imgs/flower.gif");
 background-color: #b3e6ff;
}

---

 

◆CSS background-position 배경이미지의 위치 속성

배경의 세부 속성과 값 선언 / 이미지 경로, 반복여부, 위치고정, 공간내 레이아웃 배치 / 번거롭게 입력 해야한다.

body {
  background-image: url("flower.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right center;
}

 

body{background-image:url("imgs/flower.gif") ;background-repeat:no-repeat;background-attachment: fixed;background-position: right bottom;}
 /* background:#ddff99;  배경이미지와 배경 색상은 중복되면 색을 지운다*/

 

 

 

@font-face {
	font-family: 'Pretendard-Regular';
	src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
/*본문에 사용한 웹폰트*/

 

body{background-image:url("imgs/flower.gif") ;background-repeat:no-repeat;background-attachment: fixed;background-position: right bottom; margin: 0px 280px 250px 100px;font-family: 'Pretendard-Regular';}

 

 

 

html04.zip

1.40MB

 

---

 

"이 태그 하나면 배경이미지, 배경색은 한방에!"

◆CSS background Property 통합된 배경 속성을 설정

배경하나의 선언 / 배경색 + 이미지 경로 + 반복 + 고정 + 공간내 레이아웃 배치 / 쉼표없이 아래와 같은 문법으로 나열해야 하는 섬세함이 필요하다.

body {
  background: #b3e6ff url("imgs/flower.gif") no-repeat fixed right center;
}

 

halmuny.psd

3.90MB

메인_풍선의자.psd

0.36MB