CSS 배경 이미지 응답 없음

Question

안녕하세요. 반응 형 이메일 템플릿을 만들려고합니다.

배경 이미지를 반응 적으로 만들 수 없습니다.

여기

는 이미지 코드의 샘플입니다

a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; } 

기본적으로 우리는 내가 힘든 시간 (반응) 유체를 만드는 데 다음과 같은 이미지가 -logo (A # 배울-이상) - 배너 이미지 (.banner-IMG) -learn 더 버튼 (A # 배울-이상)

-image1 및 이미지 2를 내가 여기 내 데모가 : http://jsfiddle.net/nLxjU/3/이

은 당신이 할 수있는 희망을 코드를 편집하여 내 문제가 무엇인지 확인하고 왜 대응할 수 없는지 확인하십시오.

저는 정말로 여기에서 붙어 있습니다.

Answer 1

절대 위치 지정을 사용하여 다른 div를 사용할 수 있으며 그 안에 이미지가 들어있는 백분위 수 너비 및 높이가 있으므로 화면 크기가 변경되면 div (및 그 내부 이미지)의 크기도 조정됩니다. div를 z-index가있는 모든 항목 바로 아래에두면 완료됩니다.

Answer 2

Outlook (-Express), Mail (OSX) 등의 전자 메일 클라이언트는 모두 다른 html 엔진을 사용하며 많은 제한이 있습니다. 특히 Outlook은 제한된 IE6 기반 렌더링 엔진을 사용하는 것으로 보입니다. 배경 이미지와 CSS 클래스 별 스타일링은 작동하지 않으며 절대 위치 또는 상대 위치를 잊어 버립니다.

모바일 이메일 클라이언트만을 목표로하지 않는 한 템플릿이이 이메일 클라이언트에서 잘 보이는지 확인하십시오 (이 모든 것을 지원하는 것 같습니다).

http://www.emailology.org/에 표준 가이드 (html/css)를보십시오.

Answer 3

당신은 을 다음과 같이 개선 할 수 있습니다. 그러나 @Willem은 전자 메일 서식 파일을 만드는 경우 실제로 접근 방식을 변경해야한다고 말합니다. 많은 이메일 클라이언트가 head을 완전히 제거하고 스타일을 제거합니다. 일부는 서식 지정을위한 제한된 인라인 스타일 세트를 지원하고 레이아웃은 지원하지 않습니다. 실제로 일반적으로 인라인 스타일을 사용하는 구식 테이블 레이아웃이 가장 좋은 방법입니다.

이 유용한의 일부를 찾을 수 있습니다 당신이 지금까지 알아 낸 최선을 만들기에 관해서는 http://www.campaignmonitor.com/guides/mobile/

을 :

1. 귀하의 .divider 및 .banner-img 요소가 폭 600 픽셀로 설정되었다. 100 %로 설정하십시오.
2. 배너를 배경 이미지로 사용하지 마십시오.
3. .lpanel 및 .rpanel 이미지의 크기를 부모의 너비의 100 %로 지정하십시오.

데모 : 폭 '에 대한 반응은 무엇 http://jsfiddle.net/nLxjU/