- 締切済み
背景画像を画面サイズで固定しても縮小される
画面サイズいっぱいに1枚の画像を背景にしたいです。 プレビューするとちゃんとできているのですが、ctrlと－で縮小すると固定しているはずの背景画像まで縮小されてしまします。 解決する方法はありますか。 html、cssなどは下記の通りです。よろしくお願いいたします。 【html】（img/bg.jpgは背景画像） <body> <img src="img/bg.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1>背景<h1> <p>ここにコンテンツが入ります。</p> </div> </body> 【css】 *{ margin:0; padding:0; border:0; } #bg { z-index: -1; position:fixed; } #contents{ width:950px; background-color:#FFF; } 【jquery】 <script> $(function() { setSize(); $(window).resize(function(){ setSize(); }); }); function setSize() { var imgW = 2000; var imgH = 1332; //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height(); var scaleW = winW / imgW; var scaleH = winH / imgH; var fixScale = Math.max(scaleW, scaleH); var setW = imgW * fixScale; var setH = imgH * fixScale; var moveX = Math.floor((winW - setW) / 2); var moveY = Math.floor((winH - setH) / 2); $('#bg').css({ 'width': setW, 'height': setH, 'left' : moveX, 'top' : moveY }); } </script>
- kitson00
- お礼率41% (33/80)
- ホームページ作成ソフト
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
ズームと文字サイズ変更、ウインドウリサイズの違いはわかりますか？ Ctrl + -はズームアウトなので、背景画像も縮小されるのが「記述通り」の動きだと思います。 解決方法は、、、ちょっと思いつきません。 ズームアウトした場合に、ブラウザウインドウいっぱいにするには、描画領域の外側（論理的なウインドウサイズの外側）に描画しなければならない事になります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そもそもHTMLが間違っているし ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) でチェックするとか・・ 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )」 <body> <h1>背景<h1> <p>ここにコンテンツが入ります。</p> </body> だけでよいです。 スタイルシートは body{background-image:url(./images/A.jpg);background-size:cover} 背景は背景ですから、印刷されてはまずいしコンテンツではありません。背景画像は印刷されません。 しかし、後方互換の必要があれば、 <body> <p class="back"><img src="./images/A.jpg" width="20" height="15" alt=""></p> <h1>背景<h1> <p>ここにコンテンツが入ります。</p> </body> でスタイルシートは p.back img{position:absolute;top:0;left:0;width:100%;height:auto;z-index:-10;} 下記は、 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み タブは＿に置換してあるので戻すこと。 後方互換の場合は、<body>直後に <p class="back"><img src="./images/A.jpg" width="20" height="15" alt=""></p> を入れて、スタイルシートを p.back img{position:absolute;top:0;left:0;width:100%;height:auto;z-index:-10;} に入れ替える。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- body{background-image:url(./images/A.jpg);background-size:cover} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
画像を画面の背景に設定をする場合は、画像を画面に合わせて縮小する、を選択して変更を押して個人設定を終了して下さい。 画面に合わせるじゃなく、画面に合わせて縮小を選択すれば、画面サイズになります。
関連するQ&A
- jQueryの記述についてご指摘ください。
jQuery初心者で大変恐縮ですが、質問させていただきました。 「mLivre」というプラグインを使用しております。（下記URLを参照ください） ※参考サイト 雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre http://coliss.com/articles/build-websites/operation/javascript/jque... このプラグインは本をめくるように画像を表示してくれるプラグインです。 レスポンシブでも動くようにしたいと思い、コードを記述してみました。 画像自体はレスポンシブになりましたが、プラグインの動作が少しおかしくなってしまいました。 リサイズすると、めくる様な動作をしてくれますが、画像が切り替わらなくなってしまいました。 原因は、リサイズ時に画像の枚数のカウントがおかしくなっているせいだと思いますが、 どう変えればいいのかわからずに困っております。 「mLivre.js」自体はいじっておりません。 スクリプト実行部分に記述を追記いたしました。 下記にコードを記述いたしましたので、もしよろしければご指摘いただければと 思います。 よろしくお願いいたします。 ------------コード--------------- jQuery(document).ready(function() { var imgW; var imgH; var winW; var scaleW; var setW; var setH; setSize(); //リサイズしたら実行 jQuery(window).resize(function(){ setSize(); }); function setSize() { //元の画像サイズ指定 imgW = 500; imgH = 375; //横幅に合わせて縦幅の調整 winW = jQuery( '#page' ).width(); scaleW = winW / imgW; setW = winW; setH = imgH * scaleW; //要素の画像サイズ jQuery("#slide img").width(setW); jQuery("#slide img").height(setH); //実行部分 jQuery('#slide').mLivre({ width:setW, height:setH, dossier:'http:/画像のURL/images... }); } });
- ベストアンサー
- JavaScript
- footerの背景が切れて、背景画像が見えてしまう
かなりハマってしまいまして、ご相談させて下さい。 添付画像の上の図になる形で下記コードにてhtml/cssを記載しました。 青のimg.bgはウィンドウ幅によって比率を保ったまま横100%で可変します。 containerの縦幅は決まっていて、img.bgがウィンドウ幅が横に広がっても、 container、contents、footerはz-indexで上に乗せ、あくまでもcontainerの 高さ600pxのみが表示できるようにしています。 通常のウィンドウサイズや縦にウィンドウを伸ばした場合は問題ないのですが ウィンドウを横一杯に伸ばした時に（添付画像の下の図）footerの下から img.bgが見えてしまいます。 wrapperで縦横100%の値にしていて、footerの背景画像もimg.bgを 隠せる十分な長さのものを用意しているのですが、最後のcopyrightを 入れた所から切れてしまいます。 横一杯に伸ばした際に、img.bgの長さに合わせてfooterで隠すには どのようにしたら良いでしょうか？ ご指導の程、どうぞ宜しくお願い致します。 下記、不要部分は省いたcss/html記載いたします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ html,body{ width:100%; height:100%; position:relative; } #wrapper{ width:100%; min-height:100%; height:100%; background-color:red: position:relative; } body > #wrapper{ height:auto; } img.bg { /* Set rules to fill background */ min-width:1000px; min-height:586px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: absolute; top:0; left:0; z-index: 0; } #container { width:95%; height:500px; position: relative; overflow: hidden; z-index: 4; } #contents{ width:100%; background-color: green; position: relative; z-index: 2; } #footer{ width:100%; background: url(../img/footer_black.jpg) left top repeat-x; background-color: black; position: relative; z-index: 3; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ HTML ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head>...略...</head> <body> <div id="wrapper"> <img class="bg" src="img/blue_BG_pic.jpg" alt="" /> <div id="container">...略...</div> <div id="contents">...略...</div> <div id="footer">...略...</div> </div><!--/wrapper--> </body> </html>
- 締切済み
- CSS
- ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
- フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- IE6で外部リンク画像の下に隙間
IETesterの6で確認していたところ、 外部スタイルシートの画像の下に隙間（10px程）ができてしまいます。 Firefox、IE8、IE7ではこの現象は見られませんでした。 以下記述となります。 /* HTML */ <div id="bg_top01"></div> <div id="contents_box01">あああ</div> <div id="bg_btm01"></div> /* CSS */ #bg_top01 { background:url(../img/bg_top.gif) no-repeat; width:760px; height:6px; } #contents_box01 { background-color:#2F4473; width:716px; padding:0 22px; } #bg_btm01 { background:url(../img/bg_btm.gif) no-repeat; width:760px; height:6px; } 隙間ができるのはbg_top01の下だけです。 他のサイトで「vertical-align: bottom」を入れると直るあったので、入れてみたんですが変わりませんでした。 隙間をなくすのに他に方法がありますでしょうか？ ご助言をお願いいたします。
- ベストアンサー
- HTML
- JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置しようと考えています。 以下のようなコードを作成したのですが、firefox(3.6.3)だとmouseupによるmousemoveのunbindがうまくいかず、mousemoveが維持されます。 IE8、chrom、operaでは考えたとおりの動きをしますが、ときたまchromでfirefoxと同様の不具合がおきます。 どのようにコードを修正すればよいでしょうか？ ------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> <!-- div#frame1{ position : absolute; height : 360px; width : 240px; top : 0; left : 0; border : 5px solid #000FFF; } div#frame1 img#handle{ position : absolute; bottom : 0; right : 0; border : 5px solid #FFF000; } //--> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("img#handle").mousedown(function(e){ $("#frame1") .data("mdownX" , e.clientX) .data("mdownY" , e.clientY); $(document).mousemove(function(e){ var width = parseInt($("div#frame1").css("width"),10); var height = parseInt($("div#frame1").css("height"),10); $("div#frame1").css({ width : width + (e.pageX - $("#frame1").data("mdownX")) + "px", height : height + (e.pageY - $("#frame1").data("mdownY")) + "px" }); $("#frame1") .data("mdownX" , e.pageX) .data("mdownY" , e.pageY); }); }); $(document).mouseup(function(){ $(document).unbind("mousemove"); }); }); //--> </script> <title>zoom</title> </head> <body> <div id="frame1"> <img id="handle" src="image.bmp" alt="画像"/> </div> </body> </html>
- ベストアンサー
- JavaScript
- 背景画像
背景画像の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
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- ウィンドウの高さによって画像のサイズも変更したい
よろしくお願いいたします。 ウィンドウサイズの高さが800px以下の場合、 〇〇.jpgを80%のサイズで表示させたいのですが、 うまく行かず、質問させていただいました。 下記のように書いてみたのですが、 全く動かず。。 $(document).ready(function(){ var HHeight = $(window).height(); if(HHeight <= 800){ $(".wrap img").attr({width: "60%"}); }else{ $(".wrap img").attr({width: "100%"}); } }); すごく検討違いな書き方なのかもしれません・・。 ご存知の方おられましたら、アドバイスいただければと思います。 javascriptでもjqueryでもどちらでもかまいません。 どうぞよろしくお願いいたします。
- ベストアンサー
- Java
- jqueryでdata-の画像サイズの取得方法
通常の場合、 <img src="hoge.png" /> $("img").on("load",function(){ var w = $(this).width(); var h = $(this).height(); $(this).css({"width":w +"px", "height":h +"px"}); }); でサイズは取得できますが、 <img src="hoge.png" data-src="hoge2.png" /> の場合でhoge2.pngの画像サイズを取得する方法を探しています。 分かる方がいらしたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
