여러 CSS 배경 이미지를 유체 반응 형으로 만드는 방법은 무엇입니까?

CSS 배경 이미지가 포함 된 여러 섹션이 포함 된 유체 반응 형 웹 사이트를 만들고 있습니다. 이 이미지를 유체 반응으로 만드는 방법에 대해 어떻게 생각합니까? 표준 태그를 사용하여이를 수행하는 방법을 알고 있지만 CSS 배경 이미지를 이해할 수는 없습니다. 아래에서 볼 수 있듯이 태그에는 CSS에 배경 이미지가 각각 포함됩니다.여러 CSS 배경 이미지를 유체 반응 형으로 만드는 방법은 무엇입니까?

내 사이트의 구조 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Example</title> 
</head> 
<body> 
    <section id="background-image-one"></section> 
    <section id="background-image-two"></section> 
    <section id="background-image-three"></section> 
</body> 
</html>

출처

2013-04-16 Matt

질문에 CSS를 추가하십시오. 더 많은 도움이 될 것입니다 – davidb

섹션에 내용을 넣어 시작할 수 있습니다. 아무 것도없는 블록 요소는 기본적으로 높이가 0px이므로 볼 수 없습니다. – PlantTheIdea

당신이 대부분의 모바일 장치에서 작동합니다 이미지를 확장 할 수있는 background-size을 사용할 수 있습니다 -하지 (보통 용의자)하지만 일부 이전 데스크톱 브라우저에. 이렇게해도 이미지가 축소되지는 않으므로 다른 크기의 이미지를 다양한 화면 크기의 장치에 서버 할 수있는 http://adaptive-images.com/과 같은 것을 볼 가치가 있습니다. N.B. 다른 뷰포트 크기가 아닙니다.

출처

2013-04-16 14:50:20 matpol

아 ... 1 분 빠르게 예, 대답입니다. 이'background-size : 100 % 100 %'와 같이'background-size'를 설정할 수 있고 이미지를 축소 할 것입니다. – Tbi45

즉, 위의 각 섹션에 ID가있는 100 % 100 % background-size를 적용하겠습니까? – Matt

예. 다른 말로하면 그렇게해야합니다. – Tbi45

여러 CSS 배경 이미지를 유체 반응 형으로 만드는 방법은 무엇입니까?

답변

관련 문제