CSS 백그라운드 이미지 - CSS baeggeulaundeu imiji

Question

background-image: url('이미지 주소'); 로 이미지를 넣는다.

background-repeat : 배경 이미지 패턴

repeat : 가로 세로 반복적으로 배열, 기본값
repeat-x : 이미지가 가로로만 반복
repeat-y : 이미지가 세로로만 반복
no-repeat : 이미지가 반복 배열되니 않는다.

background-size 속성 : 배경이미지 크기 지정

auto : 기본값으로 배경 이미지 원래의 폭과 너비 그대로 표시한다.
cover : 배경지역이 배경이미지로 완전히 덮이도록 이미지를 최대한 크게해서 표시한다.
따라서 이미지의 일부분이 안보일 수 있다.
contain : 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절한다.
inital : 기본값으로 초기화한다
길이 : px, cm 등의 단위로 배경 이미지의 폭과 너비를 조정한다.
첫번째 값은 폭, 두번째 값은 너비
한가지 값만 넣을경우 나머지는 auto설정으로 표시된다.
% : 부모요소에 비례한 %값으로 지정
한가지 값만 넣을경우 나머지는 auto설정으로 표시된다.

background-size: cover --> 이미지가 페이지에 꽉 차게 해준다.

See the Pen background-size by 정혜선 (@Diligent-milk) on CodePen.

목차 Show

background-image: url('이미지 주소'); 로 이미지를 넣는다.
background-repeat : 배경 이미지 패턴
background-size 속성 : 배경이미지 크기 지정
background-attachment : 배경이미지 고정
CSS 배경 이미지 삽입
CSS 배경 이미지 반복
배경 이미지 가로 반복
배경 이미지 세로 반복
배경 이미지 반복 제거
CSS 배경 이미지 위치 설정
배경 이미지 위치 설정 : 중앙 상단
배경 이미지 위치 설정 : 정중앙
배경 이미지 위치 설정 : 중앙 하단
배경 이미지 위치 설정 : 왼쪽 상단
배경 이미지 위치 설정 : 왼쪽 중앙
배경 이미지 위치 설정 : 왼쪽 하단
배경 이미지 위치 설정 : 오른쪽 상단
배경 이미지 위치 설정 : 오른쪽 중앙
배경 이미지 위치 설정 : 오른쪽 하단
CSS 배경 이미지 위치 고정
CSS 배경 일괄 적용

background-position : 배경이미지 위치 지정

left top : 왼쪽 상단
left centor : 왼쪽 중앙
left bottom : 왼쪽 맨아래
right top : 오른쪽 상단
right centor : 오른쪽 중앙
right bottom : 오른쪽 맨아래
center top : 가운데 상단
center center : 정 가운데
center bottom : 가운데 맨아래

background-position: top --> 이미지가 위쪽 상단에 위치하게 함

See the Pen background-position by 정혜선 (@Diligent-milk) on CodePen.

background-attachment : 배경이미지 고정

scroll : 이미지가 요소에 상대적인 위치, 기본값
fixed : 이미지가 윈도우 창에 상대적인 위치 (스크롤 바를 내려도 위치가 그대로)
local : 스크롤 할 때 요소의 내용에 상대적인 위치

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

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://dasima.xyz/wp-content/uploads/2018/10/css-background-image-ex-3.png");
}

CSS 배경 이미지 반복

배경 이미지 가로 반복

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

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

body {
  background-image:url("http://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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("https://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/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://dasima.xyz/wp-content/uploads/2018/10/css-background-image-ex-7.png") no-repeat fixed right top;
}

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

background-image url 경로 css 배경이미지 넣기 CSS background-image cover CSS background-image: url HTML background image CSS background-size

CSS 백그라운드 이미지 - CSS baeggeulaundeu imiji

background-image: url('이미지 주소'); 로 이미지를 넣는다.

background-repeat : 배경 이미지 패턴

background-size 속성 : 배경이미지 크기 지정

background-size: cover --> 이미지가 페이지에 꽉 차게 해준다.

background-position : 배경이미지 위치 지정

background-position: top --> 이미지가 위쪽 상단에 위치하게 함

background-attachment : 배경이미지 고정

CSS 배경 이미지 삽입

CSS 배경 이미지 반복

배경 이미지 가로 반복

배경 이미지 세로 반복

배경 이미지 반복 제거

CSS 배경 이미지 위치 설정

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

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

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

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

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

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

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

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

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

CSS 배경 이미지 위치 고정

CSS 배경 일괄 적용

관련 게시물

광고하는

최근 소식

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의