CSSでレスポンシブ

お世話になります。
現在サイト製作中で、わからないところが出てきてしまったので質問させていただきます。

前提
・横幅100%のページ
・レスポンシブ
・縦スクロールのサイト
Wordpressでよく見るようなこういった全画面縦スクロールです（http://accesspressthemes.com/theme-demos/?theme=accesspress-parallax）

CSS内でmedia queryを使用して、
画面幅に合わせて背景画像を切り替えたいと考えています。

現在使用しようとしている背景画像が2000px × 1000pxで、
レスポンシブにするとなると、
スマホではちょっと小さすぎる...
ということで、スマホ画面に合わせた縦長の画像を作成しました。

まず初歩的な問題で躓いてしまいました。

HTML
1<div id="contents1">
2<p>ここは文章です</p>
3</div>
4

CSS
1#contents1{
2background-image:url(../images/c1.jpg);
3background-size:contain;
4}

これだと当たり前ですが、
背景画像が全然表示されず、
一度文章<p>にpaddingをとってみたのですが
正確なpaddingは取れず...
画像を背景として縦横100%で表示するには
どのようにしたらよろしいでしょうか。

すみませんがご回答よろしくお願いいたします。

行動規範の内容に同意します

回答2件

スマートフォンでは背景画像を表示する際不具合が発生することがあるようですね。
下記のハックで対応してはでいかがでしょうか。

html
1<body>
2<!-- 背景は background-hackに指定 -->
3<div class="background-hack"></div>
4<!-- 実際の内容は contents1に記載 -->
5<div class="contents1">  
6<!-- 実際の内容-->
7</div>
8</body>

css
1.background-hack {
2   z-index: -1;
3   background-image:url(../images/c1.jpg);
4   background-repeat  : no-repeat;
5   background-size  : auto 100% ; 
6/* ↑横幅を基準にする場合は background-size  : 100% auto  ; */
7   position: fixed;
8   top: 0;
9   left : 0;
10   right  : 0;
11   bottom : 0;
12}
13