홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

CSS 배경 이미지 속성

세상이야기      조회 수 40 추천 수 0 2017.12.24 13:11:18


css 파일 내용


body { background:#e6e6e6 url(../images/절대경로/상대경로) no-repeat center top; }


위처럼 배경 이미지를 넣을때 옵션을 설명 합니다.

no-repeat center top 부분이 배경 이미지에 대한 옵션 들입니다.


그림 / 색상 설정

Background-color: #000000   html 색상코드 값

background-image:url("  ")  이미지 경로


그림 옵션

repeat    이미지를 배경안에서 반복합니다. 가로/세로 모두 반복함

no-repeat   이미지를 한번만 표시 합니다.

repeat-x    수평 가로축 즉 x 축만 반복합니다.

repeat-y    수직 세로축 즉, y 축만 반복합니다.


center  그림을 가로 가운데 즉, x 축 가운데 표시 합니다.

top      그림을 세로 최상위 즉, y 축 제일 상단에 표시합니다.


bottom 그림을 세로축 즉, y 축 맨 아래쪽에 위치 시킵니다.

left       기본 속성이기에 테그를 넣지 않습니다.

right     그림을 가로 즉, x 축 제일 우측에 표시 합니다.

middle  그림을 세로 축 즉, y 축 가운데 표시 합니다.


여러 옵션을 사용해도 되지만, 중복이 되면 제일 마지막에 기록된 테그가 실행 됩니다.


List of Articles
번호 제목 글쓴이 날짜 조회 수
» CSS 배경 이미지 속성 세상이야기 2017-12-24 40
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 42
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1595
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3258
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2943
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1879
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1752
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1652
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2425
22 안드로이드 OS 어플개발을 위한 프로그램 세상이야기. 2010-10-22 3081
XE Login