[CSS 기초] css 배경 속성

 

 

안녕하세요 PNcoding입니다 :)

 

이번 포스팅에서는 css 배경 관련 속성에 대하여 알아보도록 할게요 :)

 

css의 기초라 할 수 있는 선택자에 관련된 내용은 앞 포스팅을 참고해 주시면 되겠습니다. 

 

https://pncoding.tistory.com/12

[CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자

 

https://pncoding.tistory.com/14

[CSS 기초] css 선택자 (2) 구조, 자식, 자손 선택자

 

---

 

 

1.  background-color

배경색상을 지정할 때 사용하는 속성입니다.

기본값은 transparent(투명)이며 속성값으로 원하는 색상코드를 넣어 색상을 표현할 수 있습니다.

 

css에서의 색상 표현 방법은 기본적으로 영문법, 16진수, rgb(혹은 rgba)를 사용합니다.

실무에서는 16진수나 rgb(rgba)를 주로 사용합니다.

 

CSS

.box {
    width: 300px;
    height: 300px;
    background-color: tan;
}

 

HTML

<div class="box"></div>

 

background-color 결과 화면

 

 

 

2.  background-image

두 번째는 배경 이미지를 지정할 때 사용하는 속성입니다.

기본적으로 지정한 태그의 크기보다 이미지의 크기가 작을 경우 이미지가 태그의 크기에 가득 찰 때까지 반복적으로 표현됩니다.

 

배경이미지를 불러올 때는 이미지태그의 경로와 동일하게 상대경로 또는 절대경로를 사용하여 불러올 수 있습니다.

 

상대경로 및 절대경로에 대하여 궁금하신 분은 

https://pncoding.tistory.com/13

[HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그

여기를 참고해 주시면 되겠습니다. :)

 

이미지태그와 다르게 배경이미지는 url() 속성값으로 불러올 수 있습니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
}

 

HTML

<div class="box"></div>

 

반복되는 배경이미지 결과 화면

 

 

 

3.  background-repeat

이 속성을 사용하면 반복되어 표현되는 이미지가 반복되지 않도록 적용시켜 줄 수 있습니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
    background-repeat: no-repeat;
}

 

HTML

<div class="box"></div>

 

반복되지 않는 배경이미지 결과 화면

 

 

 

4.  background-position

반복되지 않는 배경이미지의 위치를 설정해 줄 수 있습니다.

기본값은 배경이미지가 위치하고 있는 좌측상단(0 0)이며, 원하는 값을 넣어 위치를 옮겨줄 수 있습니다.

앞에 들어가는 값은 이미지의 왼쪽, 뒤에 들어가는 값은 이미지의 위쪽 간격을 넣어줄 수 있습니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-position: 100px 0;
}

 

HTML

<div class="box"></div>

 

이미지의 왼쪽 간격 추가 결과 화면

 

 

보통은 수치값을 넣어주기보다는 top, bottom, left, right, center을 넣어 위치를 이동시켜 줍니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-position: center;
}

 

background-position center 결과 화면

 

 

 

5.  background-size

반복되지 않는 배경이미지의 크기를 조절해 줄 수 있습니다.

기본값은 원래 이미지의 실제 크기(auto)로 표현이 되며, 원하는 수치를 넣어 가로, 세로크기를 조절해 줄 수 있습니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-size: 1000px 600px;
}

 

HTML

<div class="box"></div>

 

background-size 조절 결과 화면

 

 

임의의 크기값을 넣으면 이미지의 가로세로 비율이 깨져서 보이기 때문에 크기값을 수치로 넣어주기보다는 contain이나 cover를 주로 사용합니다.

 

 

1) contain 사용 시

선택자 안의 빈 공간이 생기더라도 배경이미지의 크기가 선택자 안에 모두 들어갈 수 있도록 크기를 조절함

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-size: contain;
}

 

contain 사용 결과 화면

 

 

2) cover 사용 시

선택자 안의 빈 공간이 생기지 않게 배경이미지의 크기를 키워주며, 지정된 선택자의 크기보다 배경이미지의 크기가 더 커질 수 있음

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-size: cover;
}

 

cover 사용 결과 화면

 

 

 

 

5.  background-attachment

웹페이지 스크롤 시 배경이미지가 함께 따라갈지 그대로 있을지 여부를 결정합니다.

기본값은 scroll이며, 그대로 있을 시 fixed를 사용하면 됩니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background-image: url(https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg);
    background-repeat: no-repeat;
    background-size: 1000px 600px;
    background-attachment: fixed;
}

 

HTML

<div class="box"></div>

 

 

 

 

 

 

6.  background 속성 축약해서 사용하기

위에서 말한 모든 background속성은 줄여서 한 줄에 적어줄 수 있습니다.

background라고 적은 다음 속성값을 띄어쓰기로 구분해서 적어주시면 됩니다.

 

CSS

.box {
    width: 1000px;
    height: 600px;
    border: 10px solid gray;
    background: url(https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg) no-repeat center cover fixed;
}

 

 

 

 

---

 

 

여기까지 배경 관련 속성에 대하여 알아보았습니다.

다음 포스팅에선 여백 관련 속성인 margin, padding에 대하여 알려드리겠습니다. :)