ボタンの画像の幅が100％表示にできない

ワードプレスでボタンを横幅フルスクリーンで表示し、縦幅を固定の高さで表示させ、マウスオーバーで画像を切り替えたいのですが、横幅が見切れてしまいます。
使用している画像は1920×250pxの画像です。
レスポンジブ対応でスマホで表示された時でも縦幅固定、横幅を端末に合わせて縮小させて表示させたいです。
今使って見たのが


<div class="demo01">
	<a href="#">サンプル</a>
</div>

と記入し

CSSに

.demo01 {
    background: url("/img/btn_sample_out.png") no-repeat; /* ロールオーバー時のチラつき防止 */
}

.demo01 a {
    width: 100%;
    height: 250px;
    background: url("/img/btn_sample_out.png") no-repeat;
    display: block;
    text-indent: -9999px;
}

.demo01 a:hover {
    background-image: url("/img/btn_sample_over.png");
}

と記入しています。
displayをtableに変えて見たりしましたがよくわかりません。
ネットでいろいろ調べましたが
どうすればいいのかわからず困っております。

＜追記と致しまして。＞
今使用しているテーマは
Customizr Pro
入手先は
https://presscustomizr.com/
です。

お分かりになる方教えて頂けますと幸いです。
宜しくお願い致します。

kei344

2017/10/10 15:24

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。