- 締切済み
imgタグのみで画像を中央に重ねる方法
HTML5+CSS3で画像を中央にフィットした状態で重ねる方法を調べています。 一般的にはbackground-size:contain;で背景を適用したDIV要素にimg要素を挿入しますが、この場合だと一部のブラウザでは背景が印刷されないことがあります。 そのため、background-imageを使わずにこれと同じ方法を実現したいのですが、何かいい方法はありますでしょうか。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- muuming2001
- ベストアンサー率23% (202/845)
関連するQ&A
- 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
- 画像配置のimgタグとbackgroundの違い
画像をHTMLでimgタグで指定するタイプとCSSでbackgroundで指定するタイプの二つありますが、 何のときにimgタグを、何のときにbackgroundを指定するか、知りたいのです。 例えばコンテンツ内ならimgタグ、背景に配置するならbackgroundってのは分るのですが、 タイトルの画像はimgタグとbackgroundのどちらでしょうか？ 他のサイトで拝見してみましたら、どっちも使いますが… 宜しくお願いします。
- ベストアンサー
- HTML
- 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- HTML
- autoを使ってもブラウザの中央に寄らない
先週からHTMLを学び始めた初心者です。外部スタイルシートを使ってHPを作成しています。同じ様な過去の質問を見たのですがどうも分かりません。申し訳ありませんが教えて下さい。 ベースボックスでautoを使ってブラウザの中央に位置させようとしても、左に寄ってしまいます。何故でしょうか？ cssには以下のように書いています。 body{ line-height:140%; font-size:12px; color:#000000; margin:0px; } .base{ width:680px; margin:0px auto 0px auto; background:url(img/base.gif); } .header{ height:93px; background:url(img/header.gif); background-repeat:no-repeat; } .left{ width:205px; float:left; background:url(img/haikei.gif); margin:0px 0px 0px 2px; } .center{ width:430px; padding:0px 15px 0px 5px; float:left; } .footer{ clear:left; height:65px; background:url(img/haikei.gif); background-repeat:no-repeat; } HTMLは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>123株式会社</TITLE> <LINK rel="stylesheet" HREF="1111.css" type="text/css"> </HEAD> <BODY> <DIV CLASS="base"> <DIV CLASS="header"></DIV> <DIV CLASS="left"></DIV> <DIV CLASS="center"></DIV> <DIV CLASS="footer"></DIV> </DIV> </BODY> </HTML>
- ベストアンサー
- HTML
- 背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- 画像imgタグについて質問です。
XHTMLで画像を指定する方法で本来通り imgで正しいのでしょうか？ それともCSSで背景画像にする方が正しいのでしょうか？ どうかよろしくお願いします。
- 締切済み
- HTML
- IE6で、背景画像とコンテナを常に中央表示させたい
bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari では上手くいっているのですが、 IE6だけ、うまく行きません。（何故かずれてしまいます） コードは以下です ------------------------------------------------------- ●HTML <body> <div id="container"></div> </body> ●CSS body{ background: url(画像のパス) no-repeat; background-position: center top; text-align: center; } container{ width: 900px; margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている？？ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。
- ベストアンサー
- HTML
- 画像の表示方法について
画像の表示方法について 画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。しかし、実際の方法が具体的に記載されて いませんでした。 それで考えたのですが、以下のように<div></div>で範囲を決めて、その背景画像に 画像を指定すればよいと思いました。 その際に、<div>と</div>の間には何も入らなくてもいいのでしょうか？ つまりこういうことです。 <div id="photo"></div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; width: 240px; height: 180px; } これで240×180の写真が出せると思いますが、中に何も入らないのは文法上 いいのかどうか分かりません。 知人に聞いたら、適当にテキストを入れて、それをcssのtext-indentで表示を 消したらいいと言われました。つまり下記の通りです。 <div id="photo">photo1</div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; text-indent: -9999px; ←これでテキストをかなたに飛ばす width: 240px; height: 180px; } HTML、cssについては、独学で本などで学んでいるため、聞きたいことが聞けずに 困る時があります。上記のものもその一つです。 この質問と共に、ついでで申し訳ありませんが、伺いたいのですが、Webマスター たちが集まって、お互いに質問したり答えあったりするサイトや掲示板などが あったらお勧めのものを教えてください。何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS 画像中央そろえ
スタイルシートを利用して、以下のことを実現させたいのですができません。 解決方法を探しています。 ■症状 ページ全体は左寄せ ページの中身は画像単体だったり、表があったりします。 画像は中央寄せ、表も中央寄せ、表の中身（テキスト）は左寄せにしたいのですが 以下の環境下でページ中身が左寄せになってしまいます。 ⇒Mac：IE ■CSSソース #box{ ←ページ全体 width:760px; margin: 0px; text-align:center; } .box-center { ←ページ中身 text-align:center; margin:0px auto; padding:0; } .box-red { ←ページ中身の表（外枠） background-color:#FF0000; padding:5px; margin:0px auto 20px auto; } .box-yellow { ←ページ中身の表（内側） background-color:#FFF299; line-height:150%; text-align:left; } ■HTMLソース（抜粋） <div id="box"> <div class="box-center"> <img src="～"> <div class="box-red"> <div class="box-yellow">～</div> </div> </div> </div> お分かりになる方、いらっしゃいませんでしょうか？ よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
補足
background-size:contain;のように親の要素のサイズに合わせて柔軟に伸縮する方法はありませんか。