ccsのテキストボックス背景で画像がはみ出さない方法

このQ&Aのポイント
  • ccsのテキストボックスの背景画像が、指定したサイズより大きい場合に表示が崩れる問題があります。
  • しかし、背景画像をはみ出さないように表示する方法として、以下の方法があります。
  • まず、テキストボックスのサイズと背景画像のサイズを調整します。その後、`background-size`プロパティを使用して、背景画像をテキストボックスに合わせて縮小することができます。
回答を見る
  • ベストアンサー

ccsのテキストボックスの背景として、

ccsのテキストボックスの背景として、 textarea { /* 背景画像の指定 */ background-image: url("abc.jpg"); background-repeat: no-repeat; background-position: top center; /* テキストエリアのサイズ */ width: 400px; height: 150px; } といったものをよくみうけます。 しかしこの場合、abc.jpgの大きさが400×150を超える物(または未満)ですと、テキストボックスからはみでて(あるいは隙間が出てしまう)全て表示できません。 abc.jpgのサイズを変えず、cssの指定などではみ出さずに表示することは可能でしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

>しかしこの場合、abc.jpgの大きさが400×150を超える物(または未満)ですと、テキストボックスからはみでて(あるいは隙間が出てしまう)全て表示できません。 >abc.jpgのサイズを変えず、  矛盾してる。  サイズを変えなきゃ、絶対に無理なのでは??? 

関連するQ&A

  • ボックスに背景を指定した時、firefoxでうまく表示されない

    CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • 背景画像上にテキストを配置したボタンについて

    今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。(指定した縦横幅に合わせて背景画像がリサイズされるようにしたい) 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか? また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです

    こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。 CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。 親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。 横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。 HTML側 <div id="navi"> <ul id="navibar"> <li><a href="***" id="link1" title="リンク1">link1</a></li> <li><a href="***" id="link2" title="リンク2">link2</a></li> ---同様にリンクが続く--- </ul> </div> CSS側 #navi{ width:700px; text-align:right; } #navibar{ width:600px; list-style-type:none; background-color:transparent; } ul#navibar li{ width:120px; float:left; border:none; display:block; } #navibar #link1{ width:106px; height:20px; text-indent:-500em; background-image:url("images/link1bg.gif"); background-repeat:no-repeat; } #navibar #link2{ width:106px; height:20px; text-indent:-1000em; background-image:url("images/link2.gif"); background-repeat:no-repeat; } 以下同様に続く どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。

    • ベストアンサー
    • CSS
  • ボックスエリアに写真を貼り付けるには(2)

    ボックスエリアに写真を貼り付けるため、以下のようにテキストエリアの背景画像として挿入を試みたところ、テキスト・エリアに画像の一部のみ表示されました。 質問1: 画像全体を表示させるにはどうしたらよいでしょうか。 質問2: テキストエリアの右側が空白になっていますが、空白部にも見出し、小見出し、テキストを表示させるにはどうしたらよいでしょうか。 <div style="background-color:#0ff;width:950px;height:200px;overflow:auto;"> <TEXTAREA rows="10" cols="25"style="background-image:url(flower008.jpg);"> </TEXTAREA> <FONT STYLE="font-size:8mm" COLOR="#808000" SIZE="8">見出し</FONT> <h3>小見出し</h3> <FONT STYLE="font-size:5mm" SIZE="5">テキスト</FONT>

  • スクロール と 背景

    こんばんわ。 HP作成作業を頑張ってます。 超初心者でここのページや本を参考に作っております。ドリームウィーバーとCSSとで作っております。 背景をbody { background-image:url(haikei-1.jpg); background-repeat:no-repeat; background-attachment: fixed; background-position:center;} に指定しています。 このページの下の方に <textarea name="myText" cols="50" rows="10" readonly></textarea> を入れたところ テキストを書くところ背景が白いのです。 このテキストを入れるスクロールボックス?と言うのですか?良く分かりませんがその中も 背景がすける様にするにはどうしたら良いのですか? 初心者で至らない質問かと思いますが,ご伝授ください。

  • スクロール と 背景

    こんばんわ。 HP作成作業を頑張ってます。 超初心者でここのページや本を参考に作っております。ドリームウィーバーとCSSとで作っております。 背景をbody { background-image:url(haikei-1.jpg); background-repeat:no-repeat; background-attachment: fixed; background-position:center;} に指定しています。 このページの下の方に <textarea name="myText" cols="50" rows="10" readonly></textarea> を入れたところ テキストを書くところの背景が白いのです。 このテキストを入れるスクロールボックス?と言うのですか?良く分かりませんがその中も 背景がすける様にするにはどうしたら良いのですか? 初心者で至らない質問かと思いますが,ご伝授ください。

    • ベストアンサー
    • HTML
  • HP作成で背景画像が表示されないです・・

    いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとcssを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 - html - <body> <div id="container"> <div id="header">  →背景画像表示されます。  <p>*****</p>  </div> <div id="box"> <div id="left">  →背景画像表示されます。 <p>***** </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>*****</p> </div> </div> <div id="footer"> <p>*****</p> </div> </div> </body> - css - #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }

  • Mac OSX でのブラウズで、背景画像が表示されない現象

    cssで 背景画像指定、特定の画像だけ見れない状態の訴えです。私自身Macは持っておらず、検証できないのですが、訴えた本人もMacに詳しくないため、詳細内容不明です。ブラウザ種類、ブランクなのか、等、答えて貰えません。 div#MENUJPG { font-size: 16pt; margin: 0px; height: 230px; width: 540px; float: right; background: url('../img/bg/menu.jpg') no-repeat right top; } html上では、このdiv id="MENUJPG" の内部にp tag,a tag がいくつかありまして、メニューリンクとして、jpg上に文字を載せています。レイヤ状態で見えないのか??と思いきや、同ページの div#STAGE { margin: 0px; padding: 0px; height: 450px; width: 400px; float: left; background-image: url('../img/bg/butai.jpg') ; background-position: 50% 15%; background-repeat: no-repeat; } このjpgは見えているとのこと。このdiv 内も、p tagを使っており、文字をjpg上に載せています。違うのは background で一気に指定していることくらいです。 別ページにて、 p#BABY1 { width :300px; height :200px; float :left; background-image : url('../img/profile/baby.jpg'); background-repeat : no-repeat; margin: 0px; padding: 0px; background-color : #cccccc; } このタイプ、jpg,size,floatは異なりますが、同じスタイルで4つあり、全て見えないとのことです。 同サイト別ページにて、cssで同じように div id="XX"で背景画像指定している箇所がいくつかあるのですが、そちらは問題ありません。 id,float,background or backgroud-image,width,height,single quote,...と同じ使い方であり、原因不明で行き詰まっております。 似たような現象、または、考えうる原因、どうぞご示唆くださいませ。

  • bodyから左右に15pxずつ背景画像をのばしたい

    cssの基本設定ですが、 背景色をひき、さらにbodyから左右に15pxずつ背景画像をのばしたい という設定を試みていますがうまくいかずご教授いただけたらと思い書き込みさせていただきました。 背景色が #9999cc これを全面に表示し 背景画像を width 800pxで作り下にリピート そしてbodyが width 770pxの #ffffffの白色です。 そして cssで記述して表示してみたところ safaiではきちんと表示されるのですが、firefoxではbodyの幅までしか背景画像が表示されていません。 bodyから左右に15pxずつ背景画像をのばしたいのですが、どうやればよいでしょうか。 現在の状況ですが、 /* ここからcss ------------------------------------ */ *{ color: #333333; font-size: 12px; line-height: 20px; text-decoration: none; margin: 0; padding: 0; word-wrap:break-word; } html { height: 100%; margin: 0px; padding: 0px; background-color: #9999cc; background-image:url(../img/bg.jpg); background-position:center; background-repeat:repeat-y; } body { margin: 0px; padding:0px; color: #333; text-align:center; font-family:"メイリオ",Meiryo,"MS Pゴシック", Osaka, sans-serif; } 本当に困っております。 誰かわかる方がいらっしゃればよろしくおねがいいたします。

    • ベストアンサー
    • CSS

専門家に質問してみよう