CSS / background-image / 배경 이미지 정하는 속성

개요

background-image는 이미지를 배경으로 사용하게 하는 속성입니다.

  • 기본값 : none
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 1

문법

background-image: none | url | initial | inherit
  • none : 이미지를 배경으로 사용하지 않습니다.
  • url : 이미지의 URL을 입력합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 나옵니다. 반복 여부는 background-repeat 속성으로 정합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        width: 100%;
        height: 600px;
        border: 1px solid #bcbcbc;
      }
      .a {
        background-image: url( "images/bg-house.png" );
      }
    </style>
  </head>
  <body>
    <div class="a">
    </div>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 3.5+
  • Safari : 1.0+

Related Posts

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 메모

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; ​} 가변폭 ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 마우스 오버 효과 /  이미지 확대

CSS / 마우스 오버 효과 / 이미지 확대

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...