background-image 취급 목록

HTML, CSS로 div를 작성해, 그 div의 배경에 image를 넣고 싶을 때가 있지요.

하지만 딱 크기의 이미지라면 좋지만,,,

대략의 경우는 전혀 딱이 아니고, 표시시키고 있는 부분 거기가 아니야! 너무 올라갈거야! 너무 크게 확대! 라는 시간이 많네요. .

예를 들어, 이 이미지.


· Pixabay

작은 div의 배경으로 만들면,,,



이런 느낌이 되어 버리거나,

아니, 모후 모후도는 알지만,

그런 때 어떻게 하면, 능숙하게 배경 화상으로서 표시할 수 있을까를 정리했습니다.

background-repeat

우선 이미지를 반복하고 싶을 때. 아니면 원하지 않을 때.

원하지 않을 때는

background-repeat: no-repeat;

하고 싶을 때는

/* default設定。左右上下にリピート */
background-repeat: repeat;

/* 左右にリピート */
background-repeat: repeat-x;

/* 上下にリピート */
background-repeat: repeat-y;

background-color

배경이 투과가 작은 이미지를 repeat시킬 때 등은 배경색도 바꾸고 싶네요.
그런 때는 background-color도 병용할 수 버립니다.

background-color: black;
background-image: url(backgroundimage.png);

이제 검정 기반 배경에 backgroundimage.png라는 이미지가 반복됩니다.

background-position

이번에는 배경 이미지의 표시 시작 위치를 지정할 때 사용합니다.
간단하게, right, center, top에서의 지정이나, 픽셀, 퍼센티지로의 지정을 할 수 있습니다.

//右下が表示開始位置
background-position: right bottom;

//表示される領域の左端から20%、上端から40%の位置が背景画像の表示開始位置
background-position: 20% 40%; 

//左上から20px、下に40pxの位置が表示開始位置
background-position: 20px 40px; 

background-size

이곳은 자동으로 이미지의 크기를 조정해주는 뛰어난 것.
이해하기 쉬웠던 background-size 기사. from 하니만
h tps : //는 소문. 코 m/바 ckg 로운 d/

정리하면 크게 3종류
- 요소가 확실히 덮여 있지만, 이미지의 전체 표시와는 한정되지 않는 'cover'
- 크기가 변하지 않는, 있는 그대로를 표시하는 'auto'
- 전체 이미지는 표시하지만 요소를 덮는 것은 아니다 'contain'
- 배경 폭/높이를 px나 %로 지정

아무튼 자주 사용하는 것은, 하기.

background-size: cover;

덧붙여서 min-height: 100vh;라고 기재하면, 화면 가득한 높이로 표시해 주는 것 같다.

background-attachment

가끔 멋진 WEB 사이트에서 배경 이미지를 고정하고있는 것이 있군요. 아래로 스크롤해 가도, 배경은 움직이지 않고 그대로, 같다.

타카 후미의 DEMO 사이트
htps // 타카후미 메구미. 이 m/그래도/바 ckg 로운 d 있던 ch면 t/ 어서 x. HTML
타카 후미의 해설
htps // 타카후미 메구미. m / b ぉ g / ba ckg 로우 d가 있던 ch 맨 t

멋지다.

방법은 단순히

background-attachment: fixed;

하면 좋다.

'번외편' 이미지 위에 그라데이션을 적용

마지막으로, 번외편으로 이미지 위에 그라데이션을 걸는 기술.

background: linear-gradient(to top, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%), url(image.png);

그라데이션을 자세히 걸는 방법
htps //w w. 세주쿠. 네 t/bぉg/53162

그라데이션을 적용하는 도구
htps //w w. 가고 싶다 l. 이. jp/bぉg/cs3-g라다치온/

토마 이런 느낌으로, 정리 종료.