HTML 배경 이미지

배경 이미지는 css의 background-image를 쓴다. css 아직 안 배웠는데요. ㅡ_ㅡ?

 

<div style="background-image: url('이미지주소');">

 

배경 이미지는 기본적으로 요소의 크기보다 작으면 반복된다.

요소의 크기가 뭔가요? div 크기요. ok!

 

 

이미지가 반복되지 않게 하려면

<div style="

background-image: url('이미지주소'); 

background-repeat: no-repeat;

">

를 쓰면 된다.

▲ 이미지가 요소의 크기보다 클 때 요소를 덮게 하는 방법은

<div style="

background-image: url('이미지주소'); 

background-attachment: fixed;

background-size: cover;

">

를 쓰면 된다.

 

▲ 이미지가 요소의 크기보다 클 때 요소에 꽉 차에 하려면

<div style="

background-image: url('이미지주소'); 

background-attachment: fixed;

background-size: 100% 100%;

">

를 쓰면 된다.