background-imageが表示されない

Question

<div class="button_off"><img src="images/button_off.png"></div>

	div.button_off{
		background-image: url(../images/button_on.png) no-repeat;
	}
	
	div.button_off:hover img{
		visibility: hidden;
	}

ホバー時、htmlのimgは消えるのですが、cssのbackground-imageが出て来ません。
解る方いらっしゃいましたら教えて頂けると幸いです。

Comments

[maisumakun]

コンソールにエラーは出ていませんか？

[y_shigoto]

デベロッパーツールの「Console」タブのことでしょうか？
すみません、「Elements」タブと「Styles」しか見方がよく解らず、そこでは

div.button_off{
background-image: url(../images/button_on.png) no-repeat;
}

に、三角で囲まれたエクスクラメーションマークと打ち消し線が引かれています。

[maisumakun]

> 三角で囲まれたエクスクラメーションマークと打ち消し線

マウスを載せれば、何がエラーとなっているかポップアップするかと思います。

[y_shigoto]

教えて下さりありがとうございます。
chromeでは出ず、ファイヤーフォックスでは、エクスクラメーションマークにマウスを乗せるとポップアップが出たのですが、「無効な数値」としか出ませんでした…。
htmlのdiv要素（class="button_off"）の親要素に回り込み指定をかけているのですが、それにより子要素の高さが失われ出力されないということはありますでしょうか？
無知で申し訳ありません。すぐにソースを追加します。

[y_shigoto]

```html
<section>
<h2>
<p class="title">『あいうえお』</p>
<p class="time">ABCDEFG</p>
</h2>
<div class="pc_secconimg">
<div class="moviethum"><img src="images/img_moviethum03.jpg"></div>
<div class="button_off"><img src="images/button_off.png"></div>
</div>
<p class="text">紹介文</p>
</section>
```

```css
section{
width: 1000px;
overflow: hidden;
}

section h2{
font-size: 20px;
padding-top: 30px;
margin-bottom: 0;
padding-bottom: 0;
overflow: hidden;
}

section div.pc_secconimg{
clear: both;
width: 400px;
float: left;
margin-top: 10px;
padding-left: 34px;
padding-bottom: 30px;
}

section div.pc_secconimg div.button_off{
background-image: url(../images/button_on.png) no-repeat;
}

section div.pc_secconimg div.button_off:hover img{
visibility: hidden;
}

section p.text{
width: 500px;
float: right;
margin-top: 10px;
padding-right: 34px;
}
```

Answer 1

background-image: url(../images/button_on.png) no-repeat;

background-imageにはURL（など）しか書けません。background: url(...) no-repeat;とするか、background-repeat: no-repeat;を別に書いてください。

Comments

[y_shigoto]

プロパティをbackgroundに変更したら表示されました！
本当にありがとうございました！