- ベストアンサー
背景画像
cssで背景画像を指定する際、サイズなどの指定はできないのでしょうか？ 例えば、縦100pxの画像を縦80pxに縮小して表示のような事はできるのでしょうか？ ご教授ください。よろしくお願いします。
- 織田 信長（@id_system）
- お礼率29% (61/205)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
背景画像はIMGタグのように埋め込んでいると言うよりもただパズルのように貼り付けているような感じです。 大きさの指定は出来ません。IEでZoomを使った解決が出来たとしてもそれ以外の環境での解決方法がないです。 仮に今後新しい手法が生まれたとしても未対応環境はそのまま取り残されることになります。 しかし、リピート表示や座標指定など通常の画像埋め込みとは違う表現方法が出来ますからそれを上手く活用するパターンが多いと感じます。 大きさ指定に執着せず広い視点で考えたほうがいい案を思いつくんじゃないでしょうか？
その他の回答 (1)
- is_may
- ベストアンサー率65% (58/89)
こんな感じでどうでしょう？ <html> <head> <style type="text/css"> <!-- .dummy { position:absolute; top:0px; left:0px; width:expression(document.body.clientWidth*2); height:expression(document.body.clientHeight*2); z-index:1; background-image:url("http://***/back.gif"); zoom:50%; } .main { position:absolute; top:0px; left:0px; z-index:2; } --> </style> </head> <body> <div class="dummy"></div> <div class="main"> ページの内容 </div> </body> </html> CSSの.dummy内にある width:expression(document.body.clientWidth*2); height:expression(document.body.clientHeight*2); の「*2」は縮小率に応じて変更してください。今回は50%縮小なので、 50×2=100 にしています。別にぴったり100にならなくても結構ですので、80%縮小の場合は width:expression(document.body.clientWidth*1.5); height:expression(document.body.clientHeight*1.5); こんな感じです。
関連するQ&A
- スマホの背景画像について
タイトル通りスマホの背景画像について質問です。 初めて作成するので、まずはいろいろ調べたところ縦向きが320px で 横向きが480pxなので一般的にデザインカンプを作る際は320pxで作る ようなのでその通りにしております。 縦向きの場合には、サイズが合っているので表示もおかしくないのですが 横向きにしてしまうと間が空きます。 こんな問題があるので、できるだけ画像は使わないようにとのこともありますが 背景画像を使う場合、うまく表示できる方法はありますか？ 例えば、480pxで背景画像を作りcss3のbackground-sizeを使い縦向きであれば 320pxで横向きであればそのまま表示させるようにするとか思いついたのですがこの 方法はありでしょうか？
- ベストアンサー
- HTML
- 背景画像の高さが反映されない。。。
背景画像の高さが反映されない。。。 いつもお世話になっています。 超ド素人級の質問で申し訳ないのですが、とある<div>タグに対して1px×700pxサイズの背景画像をCSS上で設定（repeat-xもしています）したのですが、実際に表示すると700px分の高さが得られないのは当たり前の事なのでしょうか？ ちなみにheightプロパティは記述していません。 また、当該divタグエリアの高さも700pxに満たない高さです。
- ベストアンサー
- HTML
- css背景のサイズをiPhoneで変えない方法
cssで背景画像を指定した際に、画像が大きいと、 iPhoneなどでは勝手に縮小されてしまいます。 この背景のサイズを勝手に変更させない方法はありませんでしょうか。
- ベストアンサー
- ブラウザ
- 右寄せ時の背景画像
cssでテキストを右寄せするだけなら問題ないのですが背景画像をつける場合下記の他にどのような方法がありますか？ <p class="hoge">ここに右寄せのテキストが入ります。</p> .hoge { margin-top: 5px; font-size: 80%; color: #888; text-align: right; background: url(../img/common/hoge.png) no-repeat 420px 1px; } 420pxを0とすると当然ながら左端を基準に画像が表示されテキストは右を基準に表示されてしまいます。 ここで妥当なpxを指定する事によりうまく調整は可能なのですがサイト内でフォントサイズを変更 できるようにしておりフォントサイズMAXの幅に合わせてcssを定義するとMINの際に大きく幅が空いてしまい 不格好になってしまいます。 解決方法としてどのような方法がありますでしょうか？
- ベストアンサー
- HTML
- 背景画像
背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>
- ベストアンサー
- CSS
- Dreamweaver CS3で背景画像が表示されません
セールスレター（ホームページ）の背景に画像を使いたいので ＣＳＳの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 （グラデーションでないものも、ファイルサイズ等に関係なく表示されません） jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 （幅680px,高さ指定なし マージン：左右自動、上下０ 影の画像をＹ軸にリピート） body：（幅高さ指定なし、マージン上０、背景に入れたい画像） ページプロパティから背景画像を指定した場合は表示されますが、 ページのＴＯＰのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにＣＳＳを使用しなければならないと思い ＣＳＳで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。
- ベストアンサー
- CSS
- スクロールに沿ってjavascriptで背景画像を
現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 背景画像上にテキストを配置したボタンについて
今晩は。 いつもお世話になっています。 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
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
