배경 이미지를 넣는 CSS background-image 속성
background-image는 이미지를 배경으로 깔기 위해 사용되는 CSS 속성입니다.
사용법은 속성값으로 이미지 리소스가 있는 경로를 url로 넣어주면 됩니다.
* 예시코드
/* CSS */
div {
background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg');
width:300px; height:300px; }
<!-- HTML -->
<div></div>
* 결과
div 태그의 width와 height 값은 각각 300px입니다. 그리고 배경 이미지를 만들었는데 배경 이미지의 크기가 이 요소의 크기에 들어맞지 않아서 이미지가 잘려서 나옵니다. 그래서 사이즈 조절을 해봅니다.
이미지 크기를 조절하는 background-size 속성
값으로 contain, cover, % 를 사용할 수 있습니다.
contain: 배경 이미지의 원본 비율을 유지하면서 전부 보여줍니다. 따라서 배경이미지와 요소의 가로세로 비율이 맞지 않으면 요소에 여백이 생길 수 있습니다. 혹은 이미지에 repeat 속성이 있으면 반복되는 이미지 패턴이 보이게 됩니다.
cover: 배경이미지의 원본비율을 유지하면서 여백이 없게 빈 공간이 없도록 보여줍니다. 따라서 배경 이미지와 요소의 비율이 맞지 않으면 이미지가 잘릴 수 있습니다.
% % : 가로 세로 영역의 % 값만큼 채워줍니다. 원본 비율은 무시됩니다.
이것을 이용해서 위의 이미지를 수정해보겠습니다.
* 예시 코드
/* CSS */
div {
background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg');
width:300px; height:300px; border: 1px solid black; }
background-size: contain;
<!-- HTML -->
<div></div>
* 결과
contain으로 속성 값을 부여하면 만약 여백이 생길 경우 기본적으로 여백을 반복 이미지로 채워 넣습니다. 반복을 원하지 않으면 background-repeat: no-repeat를 추가해주면 됩니다. repeat 속성에 대해서는 밑에서 설명해드리겠습니다.
위 코드에서 contain대신 cover를 사용한 모습입니다.
이미지의 가로세로 비율과 요소의 가로세로 비율이 안 맞아 이미지의 잘린 부분이 발생하였습니다.
다음으로 %로 비율을 무시하고 영역에 꽉 맞게 넣어보겠습니다.
* 예시 코드
/* CSS */
div {
background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg');
width:300px; height:300px; border: 1px solid black; }
background-size: 100% 100%;
<!-- HTML -->
<div></div>
background-size: 100% 100%; 를 적용하여 요소의 가로 100%, 세로 100%만큼 이미지를 채워 넣기 때문에 정확히 요소의 가로세로 크기만큼 이미지가 채워집니다. 다만 이 경우 요소와 이미지의 가로세로 비율이 일치하지 않으면 이미지의 원본 가로세로 비율이 무너지게 됩니다.
background 관련 그 외 속성들
1. background-repeat
배경 이미지를 요소에 넣었는데 요소에 여백이 생기는 경우 이미지를 반복하며 여백을 채우는 패턴을 형성합니다.
background-repeat 속성 값이 repeat가 default로 설정되어 있기 때문인데요. background-repeat 속성 값을 달리하여 이런 패턴을 바꿀 수 있습니다.
background-repeat 속성 값은 다음과 같습니다.
no-repeat: 반복 안 함
repeat-x: 가로방향으로 반복
repeat-y: 세로방향으로 반복
repeat: 가로, 세로로 반복
2. background-position
이미지의 offset, 즉, 위치를 정하는 속성입니다.
background-position: x-position y-position
단위는 px나 %을 사용합니다.
3. background-attachment
background-attachment: fixed 속성 값을 사용하면 스크롤을 내려도 화면에 이미지가 고정됩니다.
이 속성의 default값은 scroll이고 스크롤을 내리면 이미지는 올라가는 보통의 일반적인 상황을 연출합니다.
주의할 점은 fixed를 사용하면 background-size속성은 그것의 element를 기준으로 size값을 정하지 않고 viewport를 기준으로 size값을 정합니다.
* 예시 코드
<head>
<style>
#scroll {
width:300px; height:300px; margin:10px;
border: 1px solid black;
background-image: url('https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_960_720.png');
background-size: 100% 100%;
background-attachment: scroll;
}
#fixed {
background-image: url('https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_960_720.png');
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="scroll"></div>
<div id="fixed"></div>
<div style="height: 1000px;"></div>
</body>
* 결과
background-image와 img 태그의 차이
background-image는 요소의 배경으로 이미지를 삽입하는 것이고 img 태그는 그 자체가 요소가 됩니다.
이미지 자체가 시맨틱하게 존재할 필요가 있으면 img태그를 사용해야 합니다. 또한 img태그는 검색엔진에서 이미지 검색의 대상이 되지만, background-image는 그렇지 않습니다.
img 태그를 원본 가로세로 비율을 유지한 채 부모 요소에 꽉 채우는 방법
img 태그에 max-width와 max-height의 값을 100%로 제약을 주고 width와 height값을 자동으로 주면 원본 비율을 유지하면서 박스를 꽉 채우게 됩니다. 밑의 예시 코드에서 #picture 선택자의 코드를 봐주세요.
* 예시코드
<head>
<style>
#picturecell{
width:360px; height:160px; border:1px solid red;
}
#picture{
max-width:100%; max-height:100%; width:auto; height:auto;
}
</style>
</head>
<body>
<div id='picturecell'>
<img src='https://cdn.pixabay.com/photo/2017/08/18/08/31/flowers-2654192_960_720.png' id='picture'>
</div>
</body>
* 결과
c.f. 원본 비율 무시하고 박스의 가로세로에 꽉 맞게 채워 넣으려면?
단순히 img 태그의 width와 height값을 각각 100%로 해주면 됩니다.
최근댓글