반응형 백그라운드 이미지 만들기

css calc 함수 이용해서 반응형 백그라운드 이미지를 만들 수 있습니다.

반응형 백그라운드 이미지를 calc함수를 이용해서 만들기

반응형 배경이미지 만들기 어렵지 않게 해결

반응형 백그라운드 이미지 calc 함수

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
    <title>반응형 백그라운드 넣기</title>
    <style>    
    .heroBox {margin:0 auto; max-width:860px; height:0; padding-bottom:calc(700/860*100%); background:url('백그라운드 이미지경로') no-repeat center center/contain; text-align:center;}
    </style>
</head>
<body>
   	<div class="heroBox">
       	<p>반응형 백그라운드를 만들어보세.</p>
    </div>    
   </body>
</html>

css에서 백그라운드가 들어갈 div 크기를 정해준다.

반응형으로 할거라서 max-width 값을 넣어줌

그리고 height 값은 0으로 해주고 대신 padding-bottom이나 padding-top 값으로 백그라운드 이미지가 들어갈 크기를 비율로 계산해서 넣어준다.

padding-bottom : 백그라운드 세로 너비값/가로 너비값*100%

백그라운드 이미지가 들어갈 크기가 가로: 860px 세로: 700px 이므로

padding-bottom: calc(700/860*100%); 으로 넣어주면 된다.

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
    <title>반응형 백그라운드 넣기</title>
    <style>      
    .heroWrap {position: relative; margin: 0 auto;  max-width: 860px;}
    .heroWrap::before {content:""; display: block; padding-top: calc(700/860*100%);}    
    .heroBox {position: absolute; left: 0; top: 0; bottom: 0; right: 0; background:url('백그라운드 이미지경로') no-repeat center center/contain; text-align:center;}
    </style>
</head>
<body>
	<div class="heroWrap">
    	<div class="heroBox">
       		<p>반응형 백그라운드를 만들어보세.</p>
	    </div>    
    </div>
   </body>
</html>

height:0 값을 넣어 주지 않을 경우,

백그라운드가 들어가는 div를 div로 한번 더 감싼 다음 before 가상선택자를 이용해서 padding-top 값을 calc(세로픽셀/가로픽셀*100%)로 계산한 다음 텍스트가 방해되지 않도록 before로 위치시킨다.

after를 이용할 경우 z-index:1을 한번더 설정해야하는 귀찮음이 있다.

백그라운드가 들어가는 div를 position: absolute; left:0; top:0; bottom:0; right:0; 로 꽉차게 한후 겹쳐서 종횡비가 유지되는 백그라운드를 만든다.

.heroWrap {position : relative; max-width:860px;}

.heroWrap::before {content: ""; display: block; padding-top: calc(세로픽셀/가로픽셀*100%);}

.heroBox {position: absolute; left: 0; top: 0; bottom: 0; right: 0; background:백그라운드 경로 크기 위치 등;}

padding-top:100%; 또는 padding-bottom:100%는 가로너비값과 같음을 이해하여야 한다.

고민되는 background image를 화면에 맞게 잘 이용할 수 있다.

[html] <button> 링크하기 , 새창 링크하기(a링크, onclick 링크, input 링크)

버튼에 링크하는 방법, 새창으로 링크하는 방법입니다. 버튼 에 링크하는 방법은 여러가지 입니다. 로 링크하는 방법 에 onclick로 링크하는 방법 으로 링크하는 방법 태그에 링크하는 방법 에 a

amango.tistory.com

icomoon 사용법 아이콘 폰트 직접 만들어보자!

icomoon을 이용해서 fontawesome과 같이 아이콘 폰트를 직접 만들 수 있습니다. 천천히 따라서 만들어보세요. ① 일러스트 파일로 아이콘 만들어 svg 파일로 저장하기 ② icomoon에서 아이콘 폰트로 만들

amango.tistory.com

목록 태그 <ul>, <ol>, <li> 태그

목록을 정의하는 , , 태그 시멘틱태그가 중요함에 따라 이 목록태그들을 자주 쓰게 됩니다. 은 비순차적 목록(Unorder List) 은 순차적 목록(order List)을 정의합니다. 하위에 로 항목을 정렬하게 됩니

amango.tistory.com

이 포스팅은 쿠팡 파트너스 활동의 일환으로,이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'HTML&CSS' 카테고리의 다른 글

background css 축약, 한번에 쓰는 방법, 줄여서 써보자 (1)	2021.12.01
before after css 가상요소 선택자 (0)	2021.11.19
이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) (0)	2021.06.16
무료 아이콘 사이트 - BEST 8개 사이트🍄 (0)	2021.06.08
유튜브 동영상 자동실행 소스 (0)	2020.11.27

잡다지식 | 🍋에이망고🍓🍋🍉

반응형 백그라운드 이미지 만들기