프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] background-color, background-image 태그를 이용한 배경 스타일 설정법

2018.05.02
배경 스타일을 위한 속성

background-color: 배경색을 지정 (yellow, #FFFF80, Ivory)
<div style="height:50px; background-color: #FFFFF0">ivory배경색이 지정된 예제</div>


background-image: 배경 이미지를 지정할 수 있습니다. url(bg.gif)
<div style="width:250; height:250; background-image: url(bg.gif)"></div>


background-repeat: 배경 이미지의 반복 여부르리 지정. repeat, repeat-x, repeat-y, no-repeat
background-repeat: 배열 방법
repeat : 가로/세로로 타일처럼 반복.
repeat-x : 왼쪽 위부터 가로 방향으로만 반복.
repeat-y : 왼쪽 위부터 세로 방향으로만 반복.
no-repeat : 반복하지 않고 한번만 나타냄.

background-position: 배경 이미지의 위치 지정.( top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right)
<div style="width:250; height:250; background-image: url(bg.gif) ; background-repeat:no-repeat"></div>


배경이미지를 고정시킵니다.
background-attachment : 고정 여부

** 고정여부
fixed : 배경 이미지 위치를 고정시킨다.
scroll: 배경 이미지를 다른 내용과 함께 스크롤한다.


** 배경고정
.bg{position: fixed;width: 100%;height: 100%;background-image: url(images/gs_gatebg.jpg);background-size:cover; background-position: center top;} 브라우져에 크기에 따라 이미지 크기변동


** 배경이미지를 좌표로 불러오는 방법
- background-color: #fff;
- background-image: url(bg.png);
- background-repeat: no-repeat;
- background-position: 50px 50px;

위 속성들을 아래와 같이 한줄로 작성 (속기법)
background: #fff url(bg.png) no-repeat 50px 50px;

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3517
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3524
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2173
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20769
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 327
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 352
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 618
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 689
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 674
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 630
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669