-
ID:II2vOd さんの質問

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

みんなの回答 9 件

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">
<!--
#btn{
background-image: url(test.png);
background-repeat: no-repeat;
background-position: left top;
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
a#btn{
display: block;
height: 300px;
width: 300px;
}
-->
</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,885 views)

関連するトピックス

ページ上部に戻る