0

そのため、これらの質問を何度も見てきましたが、すべての解決策を試しましたが、どれもうまくいきませんでした. 頭が痛くてもう我慢できません。したがって、私の背景画像は次のように配置されます。

<body background="images/farmancover.jpg"/>

それはかなり単純です。実際、私のウェブサイトでチェックしてください: http://farmanp-ux.com

さて、私の問題は、背景画像がどの Web ブラウザーにも表示されず、それを理解するのが面倒なことです。喜んでお手伝いいただけると幸いです。初心者なのでお手柔らかにお願いします。

4

3 に答える 3

3 
<body style="background:url('images/farmancover.jpg');">

通常、インライン スタイルを使用する代わりに、これを CSS ファイルに追加します。

body {
  background:url('images/farmancover.jpg');
}

特にあなたのサイトでは、画像ファイルが実際には表示されていないため、画像が表示されない場合があります images/FarmanCover1.jpg(URL では大文字と小文字が区別されることに注意してください)。

以下は、あなたに望ましい効果を与えるはずです。

<body style="background:url('images/FarmanCover1.jpg') no-repeat;">

また、多数の HTML エラーがありますが、次の動作がテストされています

<!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">
<head>
  <title>
    Farman Pirzada - UX Designer - Harvesting creativity one at a time - Ohio, US
  </title>

  <!-- STYLES -->
  <link rel="stylesheet" type="text/css" href="http://www.farmanp-ux.com/css/style.css" />

  <meta content=
    "Farman Pirzada, UX Designer, CSS, HTML5, Web 2.0, portfolio" />
</head>

<body style="background:url('http://www.farmanp-ux.com/images/farmancover.jpg') no-repeat fixed;">
  <img src="http://www.farmanp-ux.com/images/farmanUX.png" class="center" alt="" />
  <div id="navmenu">
    <ul>
      <li><a href="farman.html">home</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="design.html">designs</a></li>
      <li><a href="services.html">services</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
  </div>
</body>
</html>
于 2013-01-07T05:45:57.100 に答える
3

最近では、HTML の一部として指定するよりも、 CSS プロパティbody { background-image: url('images/farmancover.jpg'); };が好まれているようです。

于 2013-01-07T05:47:01.513 に答える
2

元のファイルのサイズを実際に使用するにはfarmancover.jpg、実際のファイル6.7MBに変換する必要があります。.jpgこのファイル名.jpgの拡張子は ですが、拡張子が間違っているAdob​​e PSDプロジェクト ファイルです。

そうは言っても、そのファイルサイズを持つことは非常に奇妙.jpgです。これは、何かが問題であることを示しています。

ここに画像の説明を入力

まず、有効な.jpgイメージ ファイルがあることを確認します。

正しいファイル名はfarmancover.jpgです。

次の場所にあります: http://farmanp-ux.com/images/farmancover.jpg

ファイル名も大文字と小文字が区別されます。

正しい画像パスは次のとおりです。

'images/farmancover.jpg'

すべての画像のフォルダー コンテンツにアクセスするには、次の URL を使用します: http://farmanp-ux.com/images/

次に、ここにある CSS スタイル シートで: http://www.farmanp-ux.com/css/style.css

これを変える：

body
{background-repeat:none}

これに：

body {
  background:url(http://www.farmanp-ux.com/images/farmancover.jpg) no-repeat center center;
  background-repeat:none
}

また、CSS スタイルシートで見られるのは、CSS セレクターごとの最後の属性にセミコロンがないことです。各属性が 1 で終わっていることを確認してください。

次に、HTML Web ページで、背景画像用のEXTRA bodyタグを削除します。

最終結果：

背景画像付きのjsFiddle DEMO

追加:オンライン チュートリアルを使用して、IE8 などの CSS3 以外の古いブラウザーでも背景画像をフルスクリーンで表示する方法は、以下のフィドルで使用されました。

スケーラブルな背景画像を使用した jsFiddle DEMO
(/show/編集ページにアクセスするには、jsFiddle から削除します)

于 2013-01-07T05:54:39.723 に答える