background-imageに関する質問
- HPビルダーでHPを作成しているが、background-imageの作成方法を知りたい
- background-imageを使用せずに、HPのタイトルをHPの一面に散らす方法を知りたい
- 質問文章で説明が伝わりにくい場合はURLでも説明してほしい
- ベストアンサー
background-imageに関してですが
background-image: url(？？.gif")}ファイルなんですけどもＨＰビルダーでＨＰを作成してますが、 background-imageに関してはビルダーの素材を使わずに ＨＰのタイトルをＨＰの一面に散らすような感じにしたいのですが、そう言うファイルの作成方法を知りません 何方かご存知の方、是非教えて頂けますか 文章で方法が伝わりにくい場合はＵＲＬでも結構ですので分かりやすく説明お願いします。 --------------------------------------------------- ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊ ＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊ ＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊ ＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊ ＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊ ＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊ ＊＊＊ ＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊ --------------------------------------------------- こんな感じなんですが伝わりますかどうか 宜しくお願いします。
- CONAN18
- お礼率45% (132/292)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
背景画像を繰り返し書くことはスタイルシートでできます <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("****.gif"); /* 全体の背景画像 */ background-repeat: repeat-x /* 背景は横のみ繰り返す */ } --> </STYLE> </HEAD> <BODY> </BODY> </HTML> background-repeat:の説明 background-repeat: repeat-x /*横のみ background-repeat: repeat-y /*縦のみ background-repeat: repeat /*画面全体 background-repeat: no-repeat /*一回のみ ですがご提示のようにずらして表示する方法は僕の知識内では分かりません（＞＜） 多少無理したらやりかたはあります・・・ <STYLE type="text/css"> <!-- .line0 { width:100%; border: 0px inset #999; background-position: 500px 0px; background-image: url("*****.gif"); background-repeat: repeat-x } .line1 { width:100%; border: 0px inset #999; background-image: url("*****.gif"); background-repeat: repeat-x } --> </STYLE> のように複数個 background-position をずらしたのを用意して <div class="line0">(テキスト表示)</div> <div class="line1">(テキスト表示)</div> のようにHTML内(テキスト表示を囲むように)に設置すればいいのですが・・・ <table>タグ内や<LI>タグ内などで設置すると表示がおかしくなったり 背景画像として固定できないなどの問題が発生します（＞＜） ↓こんな感じになります(****.gifのところを変えて貼り付けてみてください) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Sample</title> <STYLE type="text/css"> <!-- .line0 { width:100%; border: 0px inset #999; background-position: 500px 0px; background-image: url("./*****.gif"); background-repeat: repeat-x } .line1 { width:100%; border: 0px inset #999; background-image: url("./*****.gif"); background-repeat: repeat-x } --> </STYLE> </head> <body> <div class="line1"> <h1>背景画像をずらして表示</h1></div> 背景画像をずらして表示してみよう！！ <p> <div class="line0">2列目はこんな感じ</div> <p> <table border="1" width="500" height="200"> <tr> <td><div class="line1">テーブルタグ内だとこんな感じ</div></td> </tr> </table> </body>
関連するQ&A
- バックグランドイメージが表示できません
<body id="top"> </body> css-------- body#top { background-image: url("images/background.gif"); } 上記のように書いたのでは、背景にイメージ表示できません。 使い方が間違っているのだと思うのですが、どのようにしたらいいのでしょう？何方かお分かりになる方、教えていただけませんか？おねがいします。
- ベストアンサー
- HTML
- background-imageを徐々変化させたい
現在、二枚の画像を徐々に変化させたいと思い ～HTML～ <TABLE> <TBODY> <tr> <td><a href="http://www.abcd5.com/news" class="news_botan"></a></td> </tr> <tr> <td><a href="http://www.efgh5.com/news" class="news_botan"></a></td> </tr> </TBODY> </TABLE> ～CSS～ .news_botan{ width:110px; height:10px; display:block; background:url(IMGTXT/news0.gif) no-repeat; transition: background-image 4.0s ease 5s; -webkit-transition: background-image 3.0s ease 3s; -moz-transition: background-image 3.0s ease 3s; -ms-transition: background-image 3.0s ease 3s; -o-transition: background-image 3.0s ease 3s; } .news_botan:hover{ background:url(IMGTXT/news3.gif); } としましたが変化しませんでした。 どうすれば徐々にnews0.gifからnews3.gifに変化する事が出来るのでしょか？
- ベストアンサー
- CSS
- background-imageが思うように表示されない。
os windows xp （現在ソフトはDreamweaverMXを使用しています） はじめまして、htmlタグで質問なのですが、 画面の伸縮に合わせてスタイルシートでwidth100％にして、画像を挿入しているのですが<td style="width:100%; background-image:url(../img/line01.gif); " colspan="2">を入れているのですがIEで表示されません。 このタグは間違っていますか？ 是非教えてくださいませ。
- 締切済み
- HTML
- background-imageの配置
御世話になります。 CSSにて下記画像のように『お問合せボタン』を配置したいと考えております。 左の写真の一番下のラインに合わせて配置したいんです。 お問合せボタンの上には商品説明が入るようなイメージです。 background-positionでは無理ですよね？ ご教授願います。 現在の設定↓ .go_form { display: block; background-image : url(../img/お問合せボタン.png); background-position: bottom right; background-repeat: no-repeat; text-align: left; text-indent: -9999px; }
- ベストアンサー
- ホームページ作成ソフト
- HP作成 スタイルシート
ビルダーを使ってHPを作成しています。そこで、ページの背景の上だけにgif画像を指定したくスタイルシートを追加してみたのですがうまくなりません。ビルダーのHTMLに追加しているのですが追加する場所を間違えているような気がします。ビルダーで背景色を#cc0000設定しています。 <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("image/gurad1.gif"); background-repeat: repeat-x } --> </STYLE> <LINK rel="stylesheet" href="image/table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <BODY bgcolor="#cc0000" link="#ffffff" alink="#009900">
- 締切済み
- その他(ソフトウェア)
- background-imageの画像を拡大する方法はありますか？
background-imageの画像を拡大する方法はありますか？ cssでbackground-imageを指定しています。 baackground-image: url('画像のアドレス'); この画像を拡大する方法はあるのでしょうか。 ありましたら、教えてください。 普通の画像はimageタグでwidthやheightで拡大縮小できるのですが、 baackground-imageではどうやっていいか、調べてもわかりませんでした。
- 締切済み
- その他（インターネット・Webサービス）
- backgroundについて教えて下さい。初めて作ってます。
backgroundについて教えて下さい。初めて作ってます。 ｃｓｓテンプレートの backgroundのついて教えて下さい。 真っ白いテンプレをダウンロードしてホームページビルダーで編集しています。 素人なので、コピーを利用しながら作成途中です。 画像がついているサイトで「bodyからbodyにコピーして下さい」と書いてありました。 <style type="text/css"> <!-- body{ background-image: url(画像); background-color : #000000; background-attachment: fixed; background-repeat: no-repeat; background-position: right top; --> --> --> --> --> </style> </head> <BODY> 上記をコピーした所、プレビューでは綺麗にみることが出来ました。 テキストにリンク設定してある文字にカーソルをのせると赤色に表示されます。 カラー白と付け足してみても赤いままです。 外部ｃｓｓというものかどうかすらわからないのですが、 テキスト部分にカーソルをのせて白く表示させることは出来ませんか？ もし、やり方があるならば教えて下さい。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- バックグラウンドでイメージ化するソフト
ちょっとわからないことがあるので質問させてもらいます。 バックグラウンドで動作してCD－ROMやDVD－ROMのイメージを抽出するアプリケーションを探しています。 たとえば、DVD－ROMからあるアプリケーションをインストールしている間にそのDVD－ROMのisoなどのイメージファイルを抽出できるアプリケーションを探しています。 どなたかそのようなアプリケーションをご存知でしたらぜひ教えてください。おねがいします。 あと、説明の意味がわからなければ遠慮なく言ってください。できるかぎり回答しますのでよろしくお願いします。
- 締切済み
- その他（ITシステム運用・管理）
- backgroundが反映されない
超初心者です。 htmlを書いていて、背景に画像を設定したいのですが、本のとうりにやっても表示されません。 <body background="img/16.gif"> これでそのページの背景には16.gifというファイルの 画像が表示されるはずなんですよね？ 何がおかしいのでしょうか？ ちなみに16.gifというファイルは、作成中のページと同じフォルダに保存してあるのですが・・・
- ベストアンサー
- その他（インターネット・Webサービス）
- 背景を右下に固定する方法
ビルダーでＨＰ作成をしています。 どこかのＨＰで、下記のタグを使用しましたが、 保存すると、３行目の background-image:url("張りたい画像のURL"); の部分が消えてしまい、うまく表示されません。 どうしたらうまく行くでしょうか。 <style type="text/css"> <!-- BODY{background-image:url("張りたい画像のURL"); background-position:100% 100%; background-repeat :no-repeat; background-attachment:fixed;} --></style>
- 締切済み
- ホームページ作成ソフト
お礼
すいません補足質問については撤回します。 background-repeat: repeat-y /*縦のみ繰り返す */ を貼り付けることで解決しました。 有難う御座いました。
補足
何度もすいません。 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("****.gif"); /* 全体の背景画像 */ background-repeat: repeat-x /* 背景は横のみ繰り返す */ } --> </STYLE> </HEAD> <BODY> </BODY> </HTML> で試したのですが下記のような感じになります。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 画面全体といっても全体には広がるのですが縦全体には広がりません どうすればいいでしょうか