質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    10742questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7017questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSS 背景画像が表示されません。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 390

MAASAAKII

score 2

コード

 前提・実現したいこと

background-imageを用いて背景画像を表示したい
CSS #about{background-image}が作動しない原因を探りたいです。

HTMLCSSを用いてシングルカラムサイトを作ろうとしましたが、background-imageのurlに
コードを書いてもサイトに反映されません。

 発生している問題・エラーメッセージ

追記 デベロッパーツールで確認したところ、エラーメッセージが出ました

Failed to load resource: net::ERR_FILE_NOT_FOUND


イメージ説明
CSSにおいてbackground-imageが作動しない
該当箇所と思われる部分は #about{background-image~
です。

 該当のソースコード

ソースコード
コード@charaset "utf-8";

body{
  margin: 0;
  padding: 0;
  background-color: #cccccc;
  color: #333333;
  font-size: 15px;
  line-height: 2;
}
p,h1,h2,h3,h4,h5,h6{
  margin-top: 0;
}
img{
  vertical-align: bottom;
}
ul{
  margin: 0;
  padding: 0;
}
a{
  color: #3583aa;
  text-decoration: none;
}
a:visited{
  color: #788d98;
}
a:hover{
  text-decoration: underline;
}
header{
  width: 960px;
  height: 100px;
  margin: 0 auto;
}
.logo{
  float: left;
  margin-top: 50px;
}
.global-nav{
  float: right;
  margin-top: 60px;
}
.global-nav li {
  float:left;
  margin: 0 20px;
  font-size: 20px;
  list-style:none;
}
.global-nav li a{
  color: #ffffff;
}
.global-nav li a:hover{
  border-bottom: 2px solid #ffffff;
  padding-bottom: 3px;
  text-decoration: none;
}
#wrap{
  clear: both;
  background-color: #ffffff;
  margin-top: 220px;
  padding: 35px 0;
}

.content{
  width: 960px;
  margin: 0 auto;
}
footer{
  text-align: center;
  color:#ffffff;
  padding: 20px 0;
  background-color: #767671;
}
footer small{
  font-size: 12px;
}
#about{
  background-image: url(../imagess/bding.jpeg); ←作動しない
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}
.main-center{
  width: 940px;
  margin: 0 auto;
}
h1{
  font-family: 'Bitter',serif;
  font-size: 36px;
  border-bottom: 1px solid #cccccc;
}
h2{
  font-family: 'Bitter',serif;
  font-size: 24px;
}
.icon:before{
  content: "";
  padding-right: 10px;
  border-left: 7px solid #9cb4a4;
}
#about .profile-txt{
  width: 540px;
  float: left;
}
#about .profie-image{
  float: right;
}
.clearfix:after{
  content:"";
  display:block;
  clear: both;
}
section{
  margin-bottom: 35px;
}
#about .career th{
  width: 240px;
  background-color: #f0f0f0;
  padding: 12px 0;
  border: 1px solid #cccccc;
}
#about .career td{
  width: 660px;
  padding: 12px 40px;
  border: 1px solid #cccccc;
}
table{
  border-spacing: 0;
  border-collapse:collapse;
}
#index #wrap{
  background-color: transparent;
  margin-top: 0;
  padding: 0;
}

 試したこと

・別のファイルを開いていないか
・ファイル名に誤りがないか

 補足情報(FW/ツールのバージョンなど)

sample.htmlというフォルダの中にcss,imagessという二つのファイルがあり、bding.jpegという画像をimagessファイルから引用したいです。

フォルダの構造はこのようになっています
sample.html (ディレクトリ)
├ css
├ imagess--bding.jpeg
├ single.html

../imagess/bding.jpeg

画像

また、該当画像のプロパティはこのようになっています
イメージ説明

使用しているツールはATOMです。別のサイトを作ったときは正常にbackground-imageが作動しましたが、新しくフォルダを作ってから作動しません

HTML

<!DOCTYPE html>
<html>
<head>
<meta charaset="UTF=8">
<title>XXX株式会社公式</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body id="about">
<header>
<div class="logo"></div>
<nav class="global-nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</nav>
</header>
<div id="wrap">
<div class="content">
<div class="main-center">
<h1>About</h1>
<p>株式会社XXXの紹介ページです。</p>
<section class="profile clearfix">
<div class="profile-txt">
<h2 class="icon">Profile</h2>
<p>株式会社XXXはコンサルティングを請け負うファームです。戦略部門、IT部門の二つの部門があり、クライアントの皆様のご要望に応えています。
近年のグローバル化した社会には、迅速かつ適切な経営判断が求められます。株式会社XXXでは、最新のテクノロジーを駆使した先進的な情報を駆使し、アウトプット
し続けています。</p>
</div>
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"
alt="">
</section>
<section class="career">
<h2 class="icon">Career and Job</h2>
<table>
<tr>
<th>1995年</th>
<td>株式会社XXX設立。資本金2000万円</td>
</tr>
<tr>
<th>2000年</th>
<td>IT部門設立。アメリカ合衆国カリフォルニア州に支部設立。</td>
</tr>
<tr>
<th>2005年</th>
<td>代表取締役に山田花子が就任。</td>
</tr>
</section>
</div>
</div>
</div>
<footer>
<small>シングルカラムサイト</small>
</footer>
</body>
</html>

*デベロッパーツールで確認したところ、
Failed to load resource: net::ERR_FILE_NOT_FOUND というエラーコードがでました

よろしくお願いします。イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • MAASAAKII

    2018/08/04 14:48

    takopoさんご指摘ありがとうございます。「image」ではなく「imagess」にする理由はもしかしたら同じ名前のファイルで重複しないだろうかという初心者心からくる試みです

    キャンセル

  • MAASAAKII

    2018/08/04 14:51

    mtsさん、ご指摘ありがとうございます。再度編集いたしました。また、ご指摘にあるbodyのbackground-color記述の削除を行いましたが背景色が消えたのみで画像は相変わらず表示されませんでした。

    キャンセル

  • yoshinavi

    2018/08/05 07:53

    推測ですが、「body背景に全面表示の画像を使用したいが表示されない」との理解で良いのでしょうか?

    キャンセル

回答 4

checkベストアンサー

+1

background-image: url("../imagess/bding.jpeg.jpeg");
に書き換えたら表示されるかもしれないですねぇ・・・

隣の"office"って画像に拡張子が表示されていないのがすごく気になる

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/04 21:49

    お!!
    よく見たら「bding.jpeg」までがファイル名っぽいですね!

    キャンセル

  • 2018/08/04 22:08

    エクスプローラーの「拡張子の表示」がオフになっている気がします。

    キャンセル

0

フォルダ名をsample.htmlからsampleHTMLに変更してみてはいかがでしょうか。
.(ドット)が非推奨という記事を昔に見たことがあります。

またエラーが出ているブラウザのキャッシュを削除し再起動し直してみてください。

参考サイト

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/05 17:04

    easy_no_easyさん、継続的なアドバイスをありがとうございました。先ほど解決いたしました。

    キャンセル

-1

simple.html/simple が HTML ファイルとすると、
imagessディレクトリへのパスは ../imagess でなく ./imagess (./は無くてもいい)ですね。

あと、ディレクトリに html 拡張子があったり、
HTMLファイルに html 拡張子が無いのは違和感があります。

simple (ディレクトリ)
 ├ simple.html
 ├ css
 ├ images (もしくは img)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/04 13:20 編集

    cssのbackground-iamgeから指定しているのでパスは`「../imagess」となりますよ。

    キャンセル

  • 2018/08/04 15:05

    ご回答ありがとうございます。
    拡張子の整理も行いたいと思います。
    パスにつきましては参考書に準拠した形で記入しているので誤りはないと思い、easy_no_easyさんのご意見を採用させていただきます。

    キャンセル

  • 2018/08/06 05:59

    ディレクトリ構成改善後を想定して書いてしまっておりました。
    混乱を招く記述申し訳ありませんでした。

    キャンセル

-3

aboutにoverflow:hidden;を付けてみたらどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/04 15:02

    ご回答ありがとうございます。
    ご指摘のとおりにコードを編集してみたのですが、変化ありませんでした。

    キャンセル

同じタグがついた質問を見る

  • HTML

    10742questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7017questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。