본문 바로가기
웹코딩 배우기/· CSS

CSS 배경

by 닐기 2019. 10. 28.

css 배경 이미지에 대해서 알아보자. 배경색은 기본이라 넘어간다. {background-color: 색;}으로 쓰면 배경색은 지정이 끝난다. 배경 이미지는 조금 알고 넘어가야 할 부분이 있어 정리해보자.

 

 

.body {

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

}

 

이미지 지정 방법은 기본 이렇다.

요소의 넓이 보다 이미지가 작으면 기본 반복으로 표현된다.

 

 

 

이미지 반복 설정

 

.body {

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

    background-repeat: repeat-x;

}

이미지 가로 반복 설정.

 

.body {

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

    background-repeat: repeat-y;

}

이미지 세로 반복 설정.

 

.body {

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

    background-repeat: no-repeat;

}

이미지 반복 없음 설정.

 

 

 

이미지 배경 위치

.body {

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

    background-repeat: no-repeat;

    background-position: right top;

}

 

 

 

이미지 고정(스크롤에 움직이지 않는 배경 이미지)

.body {

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

    background-repeat: no-repeat;

    background-position: right top;

    background-attachment: fixed;

}

 

.body {

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

    background-repeat: no-repeat;

    background-position: right top;

    background-attachment: scroll;

}

배경 이미지가 스크롤과 같이 움직임.

 

 

 

배경 한번에 설정하기.

.body {

    background: #ffffff url("1234.png") no-reprat right top;

이렇게 한번에 설정이 가능하다. 배경색은 #ffffff고 배경 이미지는 1234.png인데 반복되지 않고 위치는 오른쪽 위.

 

 

 

배경이 적용 되는 우선순위

background-color

background-image

background-repeat

background-attachment

background-position

 

반응형

댓글0