- 締切済み
ｈｔｍｌ・cssによる背景の2重設定
picto3の回答
- picto3
- ベストアンサー率33% (1/3)
質問に記述してあったHTMLを元に書き換えてみました。 HTML準拠の記述に関しては、前の人の回答を参考にして下さい。 <html> <head> <title></title> <style type="text/css"> body{background: url(sozai/haikei/A.gif) 50% 50% no-repeat fixed;} #bk_B{ position:absolute; top:50%; left:50%; width:300px; height:300px; background:url(B.jpg) 50% 50% no-repeat; margin-top:-150px; margin-left:-150px;} </style> </head> <body> <div id="bk_B"> <p>テキストサンプル</p> </div> </body> </html> 絶対配置を使って配置させました。 各プロパティの数値に関しては 「B.jpg」の画像のサイズが分からなかったので 縦横両方とも300pxの画像でテストしたものです。 画像のサイズは width:300px; height:300px; で指定します。「300px」をご自分の画像のサイズに置き換えて下さい。 また、「margin-top」と「margin-left」で 画像が常に画面中央に表示されるように設定してあります。 margin-top:-150px; （画像の縦幅を２で割った数値をマイナス値に） margin-left:-150px; （画像の横幅を２で割った数値をマイナス値に） このような感じでいかがでしょうか？ 解決するとよいのですが…
関連するQ&A
- 文字を右寄りにしつつ、背景を赤にするには
css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 １と１００のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか？ <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシートと、背景色の設定について
画像を画面の中心に表示させようと、以下の様に設定したら、背景色が白になってしまうのです。 この場合どのようにすれば、背景を黒く設定できるのでしょうか？ 画像の背景が黒なので困っています（涙 <head> <style type="text/css"> <!-- body{background:fixed url(＊＊＊.gif) no-repeat 50% 50%} --> </style> </head> <BODY bgcolor="#000000"> 宜しくお願いします。。。
- ベストアンサー
- CSS
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- 2重に背景画像を
質問をさせていただきます。 画像のようにこれまでは 赤のBのみをbodyに指定して パターンイメージを並べていました。 そこでその上にAの様な横だけに並べるPNG画像の背景が 欲しいとおもったところこのようなサイトを見つけました。 ttp://www.bnote.net/css/css_layout/tips_html_back.html このサイト方がおっしゃられている様に htmlにback-groundでBを指定 bodyにAを指定すれば出来る！ と思ったのですが上手くいきません。 htmlにBを並べるのは成功しました。 しかしbodyにAを指定してはめこむと pngの黄色い部分が透過されず白背景になってしまいました。 bodyにbackground-color: transparent;を指定したりと 試しましたがなんとも上手くいきません。 何かアドバイス等ございましたらよろしくお願いします！ 今は html { background-image:url(○○○○○.gif) } body { height : 100%; text-align:center; font-size:16px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.6; background-color: transparent; background-image:url(○○○○○.png); background-position: left top; background-repeat: repeat-x; } となっております。
- ベストアンサー
- CSS
- CSSを使って画像を背景としてウィンドウ全体に表示する方法を探していま
CSSを使って画像を背景としてウィンドウ全体に表示する方法を探しています。 HTMl,CSSともに初心者なので、わかりにくい表現や、ただ単純に方法が間違っているだけかもしれませんが、助言をしていただけると大変助かります。 HTML上から画像を背景全体に表示する方法は下記の方法（http://www5e.biglobe.ne.jp/access_r/hp/html/html_026.html）で行えたのですが、その後Tableなどを作成しCSSで設定しようとすると全く表示されないので、CSSで背景全体に表示されることが出来れば、Tableなども問題なくできるのかなと考えました。しかしネット中を探しても未だにCSSから画像を背景全体に表示する方法を見つけることができません。 CSSから背景全体を表示することは不可能なのでしょうか？ もし背景全体を表示するのは上記のホームページで説明されている通りHTML上で入力しなければならないのでしょうか？そしてその場合、どのようにCSSを使ってTableを表示させるように出来るか教えてください。 今いろいろと試して下記のようにHTMLとCSSに書いたのですが、表示されているのは選択している画像が縦そして横にリピートされているだけです。 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> <title>Untitled</title> <meta name="generator" content="BBEdit 9.3" charset=UTF-8"/> <link rel="stylesheet" style type="text/css" href="css.css"> </head> <body> <table="1"> <tr> <td></td> <td></td> </tr> </table> </body> </html> CSS @charset "UTF-8"; body { background-image:url(../images/background.gif); position:absolute; width:100%; height:; top:0px; left:0px; z-index:1; } .1 { width:800pixel; height:600pixel; border:10pixel; } すいませんが助言していただけると大変感謝いたします。 よろしくお願いします。
- 締切済み
- CSS
- 画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？ 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </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
- スタイルシートの背景色の取得
あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。 どなたかご教授いただけませんでしょうか。 因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。 <head> <style> td.a{ background:blue; width:25; height:15; } td.b{ background:green; width:25; height:15; } </style> <script type="text/javascript"> function s(b){ document.getElementById('ia').style.background=b.style.background; //document.getElementById('ia').style.background="red"; } </script> </head> <body> <table Cellspacing="1"> <td id="ia" class="a"></td> </table> <table Cellspacing="1"> <tr> <td id="ib" class="b" onmousedown="s(this)"></td> </tr> </table> </body>
- ベストアンサー
- JavaScript
- cssで表を中央寄せにできません。
ｃｓｓでテーブルを中央に表示させたいのですが、うまくいきません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- table{ margin-left: auto; margin- right: auto ; background-image: url(2-3/1024sita.png); background-position: center; background-repeat:repeat-y; background-position: 50% 20%; } </style> </head> <body> <table border="0" width="1024"> <tr> <td><img src="2-3/1024by730.png" width="1024" height="730" border="0"></td> </tr> </table> </body> </html> どうしてですか？
- ベストアンサー
- ネットトラブル
- <tr>の背景画像について
お世話になっております。 表題のとおりなのですが、 <table width="500px"> <tr style="background-image:url('back.gif');"> として、 back.gifが500pxの画像だとします。 <tr style="background-image:url('back.gif');"> <td>aaaa</td> </tr> と、tdが1つだった場合は問題ないのですが、 <tr style="background-image:url('back.gif');"> <td>aaaa</td> <td>bbbb</td> </tr> とした場合、250pxが2枚繰り返しのような状態になってしまいます。 これを回避し、tdが何個になっても、trの画像を1枚で表示させることはできないでしょうか。 ちなみに、背景画像は500px固定です。短く切ってリピートはできない状態です。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで<td>の背景色を変えたい。
下のようにTable aaa と bbbがあります。それぞれの<td>要素に マウスがHoverしたときに別々の色に変えたいのですが、これを CSS行うことは可能でしょうか？ <table class"aaa"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <table class"bbb"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <td>中には <a hrer="・・・が入っているのですが、 次のように行った場合、リンクアドレスが長くなるとうまく機能 しないようなのです。 table.aaa a:hover{ color: #FFFFFF; background-color: #FF0000; text-decoration: none; padding: 5px; } table.bbb a:hover{ color: #FFFFFF; background-color: #0000FF; text-decoration: none; padding: 5px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト