[CSS] 배경 이미지 설정하기

기본구조

background-images:url('이미지경로'); / background:url('이미지경로');

두가지로 사용할 수 있습니다.기본으로 이미지를 사용하게되면 보시는것처럼 오른쪽과 아래로 배경이미지가 무한 반복이 됩니다.


반복금지[no-repeat]

위에 설명한것처럼 반복이 싫은경우 사용하시면배경이미지가 한번만 보여집니다.

단, 가로로만 반복, 세로로만 반복을 지정할 수 있습니다. (2번째 이미지)

◈no-repeat 반복없음

◈repeat-x 세로로 반복

◈repeat-y 가로로 반복

위와다르게 이미지 소스뒤에 바로 적어 background:url('') no-repeat; 이런식으로도 사용가능합니다.


배경크기 (background-size)

background-size 배경 크기를 조정할 수 있는 소스입니다.

◈auto

cover

contain

PX - 예를들어 background-size:100px auto; 라고한다면, 넓이 100px에 높이는 자동으로 조절이 된다.

배경위치 [background-position]

말그대로 배경의 위치를 조정하는 내용입니다. 설정가능 사용값은 아래와 같습니다.

◈ 기본설정 - 왼쪽,위

◈ center (중앙), right (오른쪽), left (왼쪽), top(위), bottom(아래)

◈ PX - Xpx Xpx (왼쪽부터 Xpx,위로부터 Xpx 떨어진 곳에 배경이미지가 위치함)

배경이미지 + 색상

background:url('이미지경로'), #색상;

认识你很高兴 반가워요. BLOG >> blog.naver.com/535bo3ob
Follow
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections