CSSで設定した300px×300pxのbackground imageにURLを貼る方法を教えてください。

ID:a.4GiD さんの回答

name {
background-image: url("some.png");
}
これじゃ駄目？

ID:.nqsN/

div.name {
background-image: url("hoge.png");
width:300px;
height:300px;
}
div.name a {
display:block;
}

display:blockが要かなと。

ID:II2vOd

display:blockがきかないんです。
text-indentを-9999にしてるのが悪いでしょうか？

ID:t.JOkX さんの回答

どういうこと？
こういうこと？
.test {
display: block;
width: 300px;
height: 300px;
background-image: url("test.png");
}

ID:II2vOd

そうなんですけど、
<div class="test">
<a href="test.html" title="テスト" target="_top">テスト</a>
</div>
のhtmlで、「テスト」の文字にしかリンクが貼られていない状態です。
300px × 300pxの画像全体にリンクが適用されてないとわかりにくいので・・・。

ID:ydIWjD

<a href=""><div class="test">テスト</div></a> でいいだろ。

ID:II2vOd

ご回答ありがとうございます

ID:O3/JaN さんの回答

Aタグではさめばいいじゃん

ID:O3/JaN

Display:blockもね

ID:GTZpdo さんの回答

300×300pxのbackground-imageにリンクをつけたいってことなのかしら？

ID:II2vOd

そうなんです！ありがとうございます。
display:block;　かなぁ、とは考えて試していたんですけど
教えて頂いたみなさまの回答試してみます！

ID:XY3APq さんの回答

<a id="btn" href=""></a>
a#btn {
display: block;
width: 300px;
height: 300px;
background-image: url("test.png");
}
ということですか？
これですと
<a id="btn" href=""><img src="test.png"></a>
のが楽な気がします

ID:7GyI6n

この回答が答えでしょ。これ以降の回答にコメントついてんのに、何でわざわざこれがスルーされてんの？

上の方の回答はaタグにwidth、height指定してないから、意図した動作にならないのはわかるけど、少なくとも質問文から想像した限りはこれでイケるんじゃないの

ID:II2vOd

すみません。ここをヒントに何とかなりました。
後々お礼を書き込もうと思っていました。

ID:yg48bc さんの回答

日本語でおk

ID:K734Sn

お前ら釣られてるぞ

ID:II2vOd

釣りではありません。切羽詰まってます…

ID:.iifDW さんの回答

<style type="text/css">

</style>
<a href="test.html" title="テスト" target="_top" id="btn">テスト</a>
これですか？
「target="_top"」ってことはフレーム使ってるんでしょうか？

ID:II2vOd

ありがとうございます！フレームではありません。
ちなみに、DWで作成しています。
span classで書き直して、display blockを追加したら
上手くいきそうな予感です。
大きさの違う四角形をマージン無しで配置したくて
Google先生に聞いた「webkit-box」を使用しています。

ID:.nqsN/

マージンなし配置だったらpositionで配置したほうが楽だと思うけど。

ID:XY3APq

僕が読解力ないだけなんだろうか、何がしたいかさっぱりわからん。

大きさの違う四角形をどのように配置したいのですか？
横並び？縦に？

ID:zPWCVE

ださいけど、300x300に満たないものは、足りない部分を透過にしてサイズそろえればいいような…。

ID:II2vOd

正方形と長方形をマージン無しで並べてメニューにしてます。
positionではなくwebkitboxで設定しました。
透過も考えましたが、上記の方法でいけました。
ありがとうございました。

ID:ouXOa5 さんの回答

まずトピ主が何者か名乗れ。無礼者。

ID:II2vOd

この人何なんですか。

ID:II2vOd さんの回答

みなさま本当にありがとうございました。
頂いた回答をヒントに、何とか設置できました。

ID:HZjWAe

いっそ出来上がったものをここに張っていってほしい
気になって仕方がない

ID:i48YOF

「正方形〜」の件から、Modern UIっぽいと勝手に想像…。余白無いってことだから、「King County Metroの標識デザイン」っぽい感じなのかな…。

ttp://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Seattle_Metro_4.jpg

ID:II2vOd

一部です
ttp://www.fastpic.jp/images.php?file=1471500534.jpg

本当にお世話様でした。

最終更新日:2014-03-26 (2,870 views)

CSSで設定した300px×300pxのbackground imageにURLを貼る方法を教えてください。

みんなの回答 9 件

name {
background-image: url("some.png");
}
これじゃ駄目？

どういうこと？
こういうこと？
.test {
display: block;
width: 300px;
height: 300px;
background-image: url("test.png");
}

Aタグではさめばいいじゃん

300×300pxのbackground-imageにリンクをつけたいってことなのかしら？

<a id="btn" href=""></a>
a#btn {
display: block;
width: 300px;
height: 300px;
background-image: url("test.png");
}
ということですか？
これですと
<a id="btn" href=""><img src="test.png"></a>
のが楽な気がします

日本語でおk

まずトピ主が何者か名乗れ。無礼者。

みなさま本当にありがとうございました。
頂いた回答をヒントに、何とか設置できました。

関連するトピックス

CSSで設定した300px×300pxのbackground imageにURLを貼る方法を教えてください。

みんなの回答 9 件

name { background-image: url("some.png");}これじゃ駄目？

どういうこと？こういうこと？.test {display: block;width: 300px;height: 300px;background-image: url("test.png");}

Aタグではさめばいいじゃん

300×300pxのbackground-imageにリンクをつけたいってことなのかしら？

<a id="btn" href=""></a>a#btn {display: block;width: 300px;height: 300px;background-image: url("test.png");}ということですか？これですと<a id="btn" href=""><img src="test.png"></a>のが楽な気がします

日本語でおk

まずトピ主が何者か名乗れ。無礼者。

みなさま本当にありがとうございました。頂いた回答をヒントに、何とか設置できました。

関連するトピックス

name {
background-image: url("some.png");
}
これじゃ駄目？

どういうこと？
こういうこと？
.test {
display: block;
width: 300px;
height: 300px;
background-image: url("test.png");
}

<a id="btn" href=""></a>
a#btn {
display: block;
width: 300px;
height: 300px;
background-image: url("test.png");
}
ということですか？
これですと
<a id="btn" href=""><img src="test.png"></a>
のが楽な気がします

みなさま本当にありがとうございました。
頂いた回答をヒントに、何とか設置できました。