CSS _ 배경색과 이미지로 배경 꾸미기

* 본 포스팅은 스타일 시트의 기본을 위한 CSS 정보글입니다.

2. 스타일 시트의 기본을 위한 CSS 정보글

1. 배경색 넣기, background - color : rgba(0,0,0,. 1);

배경색을 넣는 코드는 background-color 코드를 사용하여 웹페이지의 색을 지정할 수 있습니다. 예를 들어 다음과 같이 body 스타일에 예시 코드를 적용하여 10%의 투명함을 가지는 붉은색 배경화면 웹페이지를 제작하는 것이 가능합니다.

 

예시 코드:

<style>
body { background-color : rgba(255,0,0,. 1);}
</style>

예시 코드 결과

2. 이미지 배경으로 넣기, background-image: url(파일 이름. 확장자);

배경 이미지를 넣는 코드 역시 background-image입니다. 웹 페이지의 배경을 일련의 이미지로 꾸미고자 할 때, 이 코드를 사용합니다. 예를 들어, 다음과 같이 body 스타일에 예시 코드를 적용하여, 블로그의 로고 이미지를 배경으로 사용하여 웹페이지를 제작하는 것이 가능합니다.

 

예시 코드:

<style>
body { background-image:url(1.png);
border: 1px dashed;}
</style>

 

예시코드 결과

바둑판 식으로 이미지가 정렬되는데요, 하나의 사진만을 배경으로 쓰고 싶을 때는 background - position을 이용하면 됩니다. 이때 중요한 점은 background - repeat 코드를 이용하여 반복을 하지 않는다고 선언해야 합니다. 예를 들어, 가운데 이미지를 위치시키고 싶으면 다음과 같은 예시 코드로 웹페이지를 제작할 수 있습니다. 

 

예시 코드:

<style>
body { background-image:url(1.png);
background-repeat: no-repeat;
background-position: 50% center;
border: 1px dashed;}
</style>

 

예시 코드 결과

 

background -repeat 코드 같은 경우, repeat x 혹은 repeat y를 같이 사용하여 가로축으로만 이미지를 반복시키거나, 세로축으로만 이미지를 반복시키는 것이 가능합니다.