CSS 배경 이미지 삽입시 반복 및 배경 위치 조절

by

CSS 배경 이미지 삽입과 반복 등의 변경은 어떻게 할까요? background-repeat 옵션이 반복을 결정합니다. background-position 속성은 배경의 위치를 지정합니다.

CSS 배경 – 색 변경

CSS 배경 색 변경을 원하는 태그에 CSS 선택자를 입력합니다. background-color 속성(property)를 사용하면, 태그별로 배경색을 변경할 수 있습니다.

<body>, <h2>, <p>, <div> 등 원하는 HTML 태그를 CSS 선택자로 지정하고, background 속성을 사용하면 배경을 디자인 할 수 있습니다.

body {
  background-color:DarkTurquoise;
}
h2 {
  background-color:LimeGreen;
}
p {
  background-color:DarkKhaki;
}
div {
  background-color:Orchid;
}

CSS 배경 이미지 삽입

<body> 태그를 css 선택자를 줍니다. background-image 속성을 사용합니다. 그리고 url이라는 속성값을 사용하고 괄호()와 따옴표"" 안에 이미지 주소를 삽입합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-3.png");
}

CSS 배경 이미지 반복

배경 이미지 가로 반복

배경 이미지를 가로만 반복하고 싶은 경우, css 속성을 추가해줍니다. background-repeat속성을 적고 속성값에 repeat-x라고 적습니다. 아마도 x축으로 반복하라는 메시지인 것 같습니다.

밑 부분에는 배경 이미지가 반복되지 않습니다. 맨 뒤에 세미콜론 ;을 빼먹지 않고 입력합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-3.png");
  background-repeat:repeat-x;
}

배경 이미지 세로 반복

배경 이미지를 세로 반복할 때에는 background-repeat 속성에 repeat-y 속성값을 사용합니다. y축으로 반복이라는 메시지입니다. 맨 뒤에 세미콜론 ;을 빼먹지 않고 입력합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-3.png");
  background-repeat:repeat-y;
}

배경 이미지 반복 제거

배경 이미지의 반복을 제거하고 싶은 경우 background-repeat 속성명에 no-repeat 속성값을 입력합니다. css 선택자 입력에는 각 줄 마다 세미콜론 ;을 빼먹지 않았나 확인을 합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-3.png");
  background-repeat:no-repeat;
}

CSS 배경 이미지 위치 설정

배경 이미지 위치 설정 : 중앙 상단

no-repeat으로 반복을 제거합니다. 그리고 background-position 속성과 center top 속성명을 사용하면 배경 이미지가 가운데 상단부로 이동됩니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:center top;
}

배경 이미지 위치 설정 : 정중앙

no-repeat 속성으로 반복을 제거하고, background-position 속성명과 center center 속성값을 사용하면, 배경 이미지를 화면의 정가운데 위치시킬 수 있습니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:center center;
}

배경 이미지 위치 설정 : 중앙 하단

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 center bottom 속성값을 사용하면, 배경 이미지가 중앙 하단으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:center bottom;
}

배경 이미지 위치 설정 : 왼쪽 상단

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 left top 속성값을 사용하면, 배경 이미지가 왼쪽 상단으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp- content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:left top;
}

배경 이미지 위치 설정 : 왼쪽 중앙

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 left center 속성값을 사용하면, 배경 이미지가 왼쪽 중앙으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:left center;
}

배경 이미지 위치 설정 : 왼쪽 하단

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 left bottom 속성값을 사용하면, 배경 이미지가 왼쪽 하단으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:left bottom;
}

배경 이미지 위치 설정 : 오른쪽 상단

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 right top 속성값을 사용하면, 배경 이미지가 오른쪽 상단으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:right top;
}

배경 이미지 위치 설정 : 오른쪽 중앙

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 right center 속성값을 사용하면, 배경 이미지가 오른쪽 중앙으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:right center;
}

배경 이미지 위치 설정 : 오른쪽 하단

no-repeat 속성값으로 반복을 제거합니다. background-position 속성과 right bottom 속성값을 사용하면, 배경 이미지가 오른쪽 하단으로 이동합니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-4.png");
  background-repeat:no-repeat;
  background-position:right bottom;
}

CSS 배경 이미지 위치 고정

background-position 속성으로 배경 이미지의 위치를 적절히 설정합니다. 그리고 background-attachment 속성명과 fixed 속성값을 작성하면 설정한 position에 배경 이미지가 고정됩니다.

body {
  background-image:url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-5.png");
  background-repeat:no-repeat;
  background-position:top right;
  background-attachment:fixed;
}

CSS 배경 일괄 적용

background의 여러 가지 속성들은 border, padding, margin 처럼 일괄적용할 수 있습니다.

background : ①배경색 ②배경 이미지 주소 ③배경 반복 ④배경 위치 고정 ⑤배경 위치
background: #E6E6FA url("https://www.ooo.com/") no-repeat fixed right top;
body {
  background:#E6E6FA url("http://43.200.228.225/wp-content/uploads/2018/10/css-background-image-ex-7.png") no-repeat fixed right top;
}

그럴 경우 하이픈 뒤의 텍스트를 지우고 background라는 단어만 심플하게 작성하면 됩니다. 대신 속성값의 순서를 지켜야 합니다.