スタイルシートで、背景画像(header.jpg')を設定してるのですが表示されません。

 --- style.css
    newpage5.html

 --- img ┐
       header.jpg

スタイルシートは

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;

ホームページビルダーでは、簡易表示されてるんですが
アップロードすると、画像が表示されないのですが・・・

以上宜しくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

>img


半角小文字や/img/ディレクトリで間違いなく、
また、border-bottom: 1px solid #FF9900;が表示されてるなら外部CSSは問題ないので、

絶対パスで画像だけ表示してみる。
http://www.○○.com/img/header.jpg

HTMLファイル内の適当な所に表示してみる。
<img src="img/header.jpg" width="200" height="200" />

style属性で書いてみる。
<div style="width: 200px; height:200px; background: url(img/header.jpg);">テスト</div>

↑このセレクタを #idや.class で適応してみる。
<div id=" ">テスト</div>

別の表示可能な画像.jpgと入れ替えてみる。

別の名前で新規保存して表示してみる。

これらで原因がわかれば、対処もできますが、
単なる記述ミスの場合が多いのでは・・・
    • good
    • 0
この回答へのお礼

スタイルシートを見直したら、
最初の方に、余計なタグを入れてたので
バグ(?)の為に、表示されない結果でした。

単なる記載ミスとヒントをくれてありがとうございます。

お礼日時:2011/04/10 18:29

画像ファイルをアップロードされましたか?

    • good
    • 0

30代男HP初心者です。


まずHP作成ソフトって記述がでたらめになるケースがあります。
なのでプロですとザクっとつくってその後タグを編集します。
・・・という事を踏まえて
そのCSSタグはどの部位にたいして設定してますか?
body{この中に書いてますか?}
それともこのかっこの外が何になってるかで何に対して設定しているかとなります。

--- style.css
    newpage5.html ←まさかこれがCSS外部データとかではないですよね
                 CSSの場合は拡張子も.CSSです。 
 --- img ┐
       header.jpg

ちなみに↑何ですか??

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;  ←ここが問題かもしれません…
この画像を背景にという事ですが全体に表示させるだけですかね??
それとも所定の位置に表示したいんですかね??
padding:20pxが何をしたいのかに依るんですが…
表示位置を指示する場合は
background-position-x:"例です"20px又は20%;
background-position-y:50px又は50%;
等写真画像の場合はx軸とy軸を指定します。
header部分にという場合はHTMLでヘッダーを定義している場合において
header{
     border-bottom: 1px solid #FF9900;
     background-image: url('img/header.jpg');
     padding: 20px;
     }

とすればヘッダー部分にその画像が表示されます。
どういう状況かがいまいちわかりませんのでこんな感じで終わらせておきます。
ちなみに…これ外部CSSでーたですかね?
只ヘッダー部分に画像を貼りたいだけで、
かつ、HTML内部にCSSを記述しているなら、なんでかんでCSSでなくて
HTMLで貼ったほうが文字数制限でその分軽くなるかと…
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Q背景画像を指定したあとにスタイルシートで指定した画像を使用することはできますか?

タイトルどおりの質問なのですが、背景に使いたい画像を表示させたあとにスタイルシートを使って違う画像を背景画像の上に表示させることはできますでしょうか。
やろうとしていることは、背景画像を表示させたあとにスタイルシートを使って違う画像をウインドウの右端に表示させたいです。
よろしくお願いします。

Aベストアンサー

s_husky です。

そのものズバリではありませんが、参考にはなると思います。
スタイルシートでの分割サンプルコードは、ゴロゴロしています。
それらを参照しながら、応用して下さい。

/* ==========================================================================================================
mystyle.css: Last update 2005/10/05 By XXXXXXXXXXXXXXXXXXXXXXX
------------------------------------------------------------------------------------------------------------- */
@charset "Shift_JIS"; /* この外部 CSS の文字コードを「Shift JIS」に設定 */

/* ==========================================================================================================
全体構造
------------------------------------------------------------------------------------------------------------- */
body {
margin: 0; /* 余白をゼロに */
padding: 0;
font-size: 10pt;
text-align: center; /* Win IE 6 で、ブロックレベル要素がセンタリングされないのを防ぐため */
}

/* ==========================================================================================================
ヘッダ
------------------------------------------------------------------------------------------------------------- */
div#header {
width: 820px;
background: url('../images/toppage/background_header.gif') no-repeat bottom;
}

/* ==========================================================================================================
メイン・コンテンツ
------------------------------------------------------------------------------------------------------------- */
div#container {
width: 820px;
margin-left: auto;
margin-right: auto;
background: rgb(170, 170, 170) url('../images/toppage/background_container.gif') repeat-y;
text-align: left;
}

div#wrapper {
float: left;
width: 80%;
}

div#content {
float: right;
width: 70%;
}

div#sidebarA {
color: white;
float: left;
width: 30%;
text-align: left;
}

div#sidebarB {
float: right;
width: 20%;
}

/* ==========================================================================================================
フッタ
------------------------------------------------------------------------------------------------------------- */
div#footer {
clear: both;
width: 820px;
font-size: 8pt;
margin-left: auto;
margin-right: auto;
background: url('../images/toppage/background_footer.gif') no-repeat top;
}

s_husky です。

そのものズバリではありませんが、参考にはなると思います。
スタイルシートでの分割サンプルコードは、ゴロゴロしています。
それらを参照しながら、応用して下さい。

/* ==========================================================================================================
mystyle.css: Last update 2005/10/05 By XXXXXXXXXXXXXXXXXXXXXXX
------------------------------------------------------------------------------------------------------------- */
@char...続きを読む

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Qスタイルシートでの背景画像の不都合

こんにちわ
スタイルシートで背景画像を指定しているのですが、画面をスクロールスクロールしたりプラウザを最大化、最小化などすると画像が一部かけたり全てなくなったりしてしまいます。
これってどうしてなんでしょうか?

Aベストアンサー

状況からするとブラウザのバグのようです。

参考URLに該当する症状が載っていれば回避策も記載されているかもしれません。

参考URL:http://members.at.infoseek.co.jp/cssbug/

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Qスタイルシートで背景画像を固定のまま最前面へ

フレームで割ったページを作ろうとしています。
上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。
もちろん、下フレームはスクロールするので、background-positionで上に固定リピート無しとしました。
ただ、この状態だと、ロゴの上にコンテンツがきてしまいますよね。
どうにかして、ロゴの下にコンテンツが来るようにできないでしょうか?(ロゴの下にもぐりこむ感じ)

無理なら無理でOKです。「できません」と回答をください。

Aベストアンサー

> 上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。
状況がよくわかりませんが、<frameset>ならフレームを超えることはないはずなのですが、、、
たとえば高さ100pxのロゴマークを表示するのに、
上80pxを上フレームに、
下20pxを下フレームのbackground-imageに指定している、、ということでしょうか?

コンテンツがロゴマークに隠れるなら、結局、全部上フレームにしているのと同じ事だと思うのですが、、、
上フレームに記述するのではダメなのでしょうか?

> (ロゴの下にもぐりこむ感じ)
position:fixedを使えば簡単なのですがIEが対応していないと言うことで、
通常はJavaScriptを使わないと行けないのですが、
DOCTYPEを記述しなくても良いなら、以下のスタイルで作れます。
(未検証ですが、こんな感じだったと思います。FirefoxやSafariで表示位置がずれるかも、、、)
<BODY>にmarginやpaddingを0px以外に指定すると、スクロールバーの位置が妙なことになるので、0pxにした方が良いです。

.title{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100px;
text-align:center;
z-Index:2;
}
.contents{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-Index:1;
padding-top: 100px;
}

<body>
<div class="title">
<img src="title.jpg" alt="タイトル&ロゴマーク">
</div>
<div class="contents">
本文
</div>
</body>

> 上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。
状況がよくわかりませんが、<frameset>ならフレームを超えることはないはずなのですが、、、
たとえば高さ100pxのロゴマークを表示するのに、
上80pxを上フレームに、
下20pxを下フレームのbackground-imageに指定している、、ということでしょうか?

コンテンツがロゴマークに隠れるなら、結局、全部上フレームにしているのと同じ事だと思うのですが、、、
上フレームに記述するのではダメなのでしょうか?

> (ロゴの下...続きを読む

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

QBlockquoteの背景の画像のwidthを調節したい [スタイルシート]

こんにちは。ブログのテンプレートを作っています。

そこで、blockquoteの背景に画像を使用しているのですが、この画像のwidthをbcockquoteのwidthに応じて変更させることは可能でしょうか?

現在のCSSの設定は以下のようになっています。
blockquote{
background: #EEE url(img/blockquote.png) no-repeat bottom left;
/*border: 1px solid #E0E0E0;*/
padding: 10px 10px 30px 10px;
margin: 1em 1em 1em 3em;
width:400px;
}

使用している画像(blockquote.png)のwidthが250pxで、photoshopで直接加工してしまってもいいのですが、何とかしてweb側で400pxに引き伸ばす事ができたらなぁ、と思っています。

<img>タグのように簡単にないものでしょうか?ご存知の方おられましたらどうぞよろしくお願いいたします。

こんにちは。ブログのテンプレートを作っています。

そこで、blockquoteの背景に画像を使用しているのですが、この画像のwidthをbcockquoteのwidthに応じて変更させることは可能でしょうか?

現在のCSSの設定は以下のようになっています。
blockquote{
background: #EEE url(img/blockquote.png) no-repeat bottom left;
/*border: 1px solid #E0E0E0;*/
padding: 10px 10px 30px 10px;
margin: 1em 1em 1em 3em;
width:400px;
}

使用している画像(blockquote.png)のwidthが250pxで、photoshopで...続きを読む

Aベストアンサー

background-imageの伸縮はできません。

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qスタイルシートで背景画像を指定

今までbodyタグで背景を指定していたのですが、スクロールバーや余白の設定で
スタイルシートを使うことになったので、背景画像もスタイルシートで指定することにしましたが、何度やっても表示されません。
このように書いてみました。

<style type="text/css">
<!--
BODY { background-image:url(img/28.gif); }
BODY { 余白の設定}
BODY {スクロールバーの設定 }
-->
</STYLE>

htmlと同じフォルダの中にある、imgフォルダの28.gifという画像です。
画像のパスは間違っていません。アップロードもしてあります。
スタイルシートの解説をしているサイトさんを見ても、
何が間違っているのかわかりませんでした。
なぜ背景が表示されないかわかる方いらっしゃいますか?
余白やスクロールバーはきちんと表示されているのですが・・・

Aベストアンサー

まず、画像ファイルのURLを、ブラウザのアドレス欄に直接入れて、画像が表示されるか確認してください。
http://アドレス/img/28.gif

そのスタイルシートは、外部ファイルではなく、HTMLファイルのヘッダーに直接記述しているのでしょうか?
その部分を省略しないで、貼り付けてください。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング