- ベストアンサー
背景に使うｊｐｇを大きめに表示する
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
別途グラフィックソフト等でリサイズ／加工しちゃえば良いのでは。 背景画像のサイズ指定は、HTML／CSSとしては定義されてない機能かと。
その他の回答 (1)
- infinity
- ベストアンサー率41% (123/295)
背景画像としてではなく、 レイヤーとしてなら可能だと思いますが、 HTMLやCSS、JavaScript等による拡大の方が 「確実に」画像は荒くなりますね（＾＾； グラフィックソフトが一番です。 下手できるほど難しい作業ではないので。
お礼
ありがとうございました。 がんばってみます。
関連するQ&A
- divの背景を高さ100%表示
以下のように、divをつかって背景色を設定した際、 右のピクセル指定の背景は、スクロールバーが出た場合でも 指定された高さまで背景色が表示されるのですが、 左の100%表示指定の方はウィンドウで隠れた部分で切れてしまいます。 色々調べたのですが、 過去にも同じような内容で質問があり、min-heightを追加する事で解決するとありました。 同じように試してみたのですが、思ったように表示がされません。 指定している場所が間違っているのでしょうか？ <style type="text/css"> html{ height:100%; } body { height:100%; } #test1 { height:auto !important; height:100%; min-height:100%; float:left; width:400px; background-color:black; } #test2{ float:right; height:800px; width:400px; background-color:black; } body > #test1 { height: auto; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>
- ベストアンサー
- HTML
- 画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？ 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。
- ベストアンサー
- HTML
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- 背景画像がNetscapeでは表示されない
<HEAD>タグ内に下記の方法で背景画像を中央に表示させています。 IE5.5では正常に表示されますが、ネスケ4.7で確認すると背景画像のみ表示されません。 <BODY>タグ内の文字は正常に表示されます。 どうしたら良いでしょうか？ <STYLE type="text/css"> <!-- table#base { background-image: url("img/bg.jpg"); background-repeat:no-repeat; background-position: center center; } --> </STYLE> 宜しくお願いします。
- ベストアンサー
- HTML
- ドリームウィーバで背景画像が表示できない
デザインでは表示されているのですが、 ブラウザで確認しようと思っても背景画像が表示されません。 コードです。 <style type="text/css"> <!-- body { background-image: url(../../%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/%E5%95%86%E5%93%81%E5%86%99%E7%9C%9F/top10.JPG); background-color: #000033; background-repeat: no-repeat; background-position: 50%; } #contents { height: 454px; width: 600px; margin: auto; margin-top: 18px; } --> </style> </head> <body> <div id="contents"> <h1></h1> <h2></h2> </div> </body> </html> なにが原因なのでしょうか？ 教えてください。
- ベストアンサー
- ホームページ作成ソフト
- CSSで背景画像をランダムに表示させたいのですが
CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。
- ベストアンサー
- HTML
- objectタグを使って背景を透明にしたいのですが
objectタグを使ってindex.html内にmenu.htmlを表示させたのですが、呼び出したmenu.htmlの背景が白くなってしまいました。 個人的には重なっても背景を透明にし、index.htmlが見えるようにしたいと考えています。 対応策はあるでしょうか？お願いします。 【index.html】 <style> div#container { background: url(bg_container.jpg); } </style> </head> <body> <div id="container"> <object type="text/html" data="menu.html" width="200px" height="570px"></object> </div> </body> 【menu.html】 <style> body{ margin: 0; padding: 0; overflow: hidden; border: none; } div#menu_in { width: 200px; height: 570px; } </style> </head> <body> <div id="menu_in"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body>
- 締切済み
- HTML
- 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は異なりますが、同じスタイルで４つあり、全て見えないとのことです。 同サイト別ページにて、cssで同じように div id="XX"で背景画像指定している箇所がいくつかあるのですが、そちらは問題ありません。 id,float,background or backgroud-image,width,height,single quote,...と同じ使い方であり、原因不明で行き詰まっております。 似たような現象、または、考えうる原因、どうぞご示唆くださいませ。
- 締切済み
- HTML
- CSSを使って、背景色をブラウザの縦100％につづかせたいです。
こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100％になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 （ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。） --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100％; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>
- 締切済み
- ホームページ作成ソフト
補足
それもかんがえたのですが私の下手な技術で編集すると画像が荒くなったり みにくくなったりするのでできればその手はさけようかとおもっていたのですが・・・ HTMLでだめですか・・・しょうがないのでグラフィック ソフトでがんばってみます。