🐾 background - 배경이미지와 관련된 속성
🔎 background-image: url("이미지의경로"); - 배경이미지를 불러오는 속성
- 쉼표(
,)로 구분지었을때 2개 이상의 이미지가 적용가능.- 먼저 작성한 이미지가 상단에서 표현.
<style> body{ background-image: url(img/cat_bg.png),url(img/land.png); /*구분지어 배경이미지를 2장 이상 적용가능! 먼저 작성한 이미지가 상단에서 표현 */ } </style> <body> <div> 공간 주기 </div> </body>
이사진은 사진 두장으로 만들어진것. 먼저 적은
img/cat_bg.png이 위에있고,img/land.png이 그 아래 밑으로 들어갔다.
🔎 background-repeat 배경이미지의 반복
no-repeat을 설정하지 않으면, 이렇게 하나의 사진이 반복된다. 그걸해결하기 위해
background-repeat: no-repeat;를 사용한다.
📌
: no-repeat(반복하지 않은 원본 한장)
📌: repeat-x(가로반복)
📌: repeat-y(세로반복)<style> body{ background-image: url(img/art.jpg); /* 배경이미지를 불러오는 속성 , url(이미지의 경로, url) - 반복되는 성격 */ background-repeat: no-repeat; /*배경이미지의 반복 - no-repeat(반복하지 않은 원본 한장) repeat-x(가로반복) repeat-y(세로반복) */ } </style> <body> </body>
🔎 background-size 배경이미지 사이즈
📌
: %(가로상의 비율),px
📌: 두자리입력시 x y= ex) 100px 200px
📌: cover이미지의 고정비를 유지하면서 크게 설정.
이미지의 고정비가 요소와 다를 시 잘라내어 빈 공간이 생기지 않게 설정.
📌: contain이미지가 잘리거나 형태가 무너지지 않는 한도 내에서 제일 크게 설정.
<style>
body{
background-size:500px 300px;
/*배경이미지 사이즈 %(가로상의 비율)
x y >> %,px
cover : 화면상 꽉차게 표현 , 가로세로의 비율을 유지
*/
background-size: cover ;
}
</style> 배경이미지 사이즈를 원하는대로 설정해줄수도있지만,
🌟background-size: cover ;👉 를 하면, 화면에 꽉차게 알맞게 설정이된다.
🔎 background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 요소와 함께 스크롤할지 지정하는 속성
: fixed 고정값
: scroll 기본값
background-size:100%; height: 3000px; background-attachment: scroll; /*scroll 기본값. 배경이미지 스크롤됨. */or
background-size:100%; height: 3000px; background-attachment: fixed; /* 스크롤바가 움직여도 배경이미지가 고정. 배경이미지 고정. */
🔎 background-position : 배경이미지의 위치를 지정하여 표현하는 속성
: x(가로축) y(세로축)
[단어]
x(left,center,right)
y(top,center,bottom)
[숫자]
px,%...
중복되는 값은 한자리로 통일후 작성 가능
body{ background-position: center top; /*배경이미지의 위치를 지정하여 표현가능한 속성 x , y >> 단어,px,% x(left,center,right) y(top,center,bottom) */ }
body{ background-position: 200px 100px; }
🔎 background-size : 배경이미지 사이즈 (위에 있음, 한번더 체크- 속성)
항상 설정을 해줘야한다. 속성 여러가지 있음.
<style> div{ background-color:aquamarine; width: 500px; height: 500px; background-image: url(img/cat_bg.png); } </style> <body> <div> 공간 주기 </div> </body>
이렇게하면, 사진이 너무커서 무슨사진인지도 알아차릴수가 없다.. 😭
<style> div{ background-color:aquamarine; width: 500px; height: 500px; background-image: url(img/cat_bg.png); background-size: 100%; } </style> <body> <div> 공간 주기 </div> </body>
background-size: 100%;을 주니, 이제야 사진의 형태를 알아볼수있다!
🌟 여기서 또,!! 만약, width랑 height가 없으면?
아무것도 안뜬다.. ㅎㅎ
<style> div{ background-color:aquamarine; background-image: url(img/cat_bg.png); background-size: 100%; } </style> <body> <div> </div> </body>그렇기 때문에 까먹지말고, 항상 width랑 height로 "공간을" 줘야함,
div 안에 공간 주기 를 작성해보았다.
<style> div{ background-color:aquamarine; background-image: url(img/cat_bg.png); background-size: 100%; } </style> <body> <div> 공간 주기 </div> </body>
그러면, 이렇게 작은 공간이 생겨 사진이 아주 조금하게 보이는것을 확인할수있다.
-
한가지 더 팁을 주자면,
background로 통일하여 작성가능
background: 배경색 배경이미지 배경이미지반복 배경이미지위치;- (띄어쓰기로구분)ex)
{ background: #09C url('image.png') no-repeat 10px center; }
