background: urlによって背景画像を挿入できない

Question

<article class="institution">
	  <section class="content-wrapper">

		<article class="institution">
		  <section class="content-wrapper">
		    <div class="content">
		      <h2>施設案内</h2>
		      <p>
		      のびのびできる空間をご用意しております。
		      </p>
		      <p class="btn"><a href="#">more</a></p>
		    </div>
		  </section>
		</article>

	  </section>
	 </article>

.institution {
  background: url(/Users/ken/Documents/practice2/images/institution1.jpg); 
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 500px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.institution::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.institution .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.institution h2 {
  color: #fff;
  text-align: left;
}

.institution p {
  color: #fff;
  text-align: left;
  margin-bottom: 70px;
}

.institution p.btn {
  margin: 0;
}

.institution p.btn a {
  color: #fff;
  display: block;
  font-size: 0.875rem;
  border: 1px solid #fff;
  width: 200px;
  line-height: 60px;
  text-align: center;
}

.institution p.btn a:hover {
  background: #fff;
  color: #333;
}

 @media screen and (max-width: 479px) {
  .institution .content {
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .institution h2,p {
    text-align: center;
  }

  .institution p.btn a {
    width: 30%;
    min-width: 200px;
    margin: 0 auto;
  }
}

補足
ファイルたちはpractice2の中で、以下のような位置関係になっています。

css　フォルダ　（この中にcssファイルがある）
images　フォルダ　（この中に画像ファイルがある）
index.html

Comments

[kei344]

HTML/CSS/画像の位置関係を質問文に追記してください。

[Garu-san]

位置関係とはどういう意味でしょうか？
全体のコードの中で<article class="institution">やbackground: urlがどの位置にあるかといったことでしょうか？
知識不足で申し訳ありません。

[kei344]

言葉足らずでした、HTMLファイルとCSSファイルと画像ファイルがどのフォルダに入っているか、そういう位置関係です。

[Garu-san]

ファイルたちはpractice2の中で、以下のような位置関係になっています。

css　フォルダ　（この中にcssファイルがある）
images　フォルダ　（この中に画像ファイルがある）
index.html

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

Answer 1

backgroundをbackground-imageに。

[css]
background-image: url(../images/institution1.jpg);

Comments

[Garu-san]

問題はフォルダパスの左側の..でした。(../images)
backgroundでもbackground-imageでも正しく背景画像を挿入できました。
教えていただいてありがとうございました。

[phish_tempura]

../　は、１つ上の階層　../../　は２つ。
今後とも頑張ってください。

Answer 2

画像のパスが間違っている可能性があると思います。
practice2というフォルダ内にhtmlファイルがあるのでしたら、

background: url(/images/institution1.jpg);

でどうでしょうか。

Comments

[Garu-san]

質問する前に上記の通りにすでに試しましたが、うまく行きませんでした。もう一度試しましたが、やっぱりうまくいきません。

[phish_tempura]

htmlファイルは、practice2の直下にありますか？

[Garu-san]

htmlファイルは、practice2の直下にあります。
background-imageに修正しても画像は挿入されませんでした。