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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

198閲覧

background-imageが反映されない

kana0701

総合スコア28

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/04/17 07:40

前提・実現したいこと

写真をスライドさせたい

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

background-imageが反映されない

該当のソースコード

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link href="css/demo-style.css" rel="stylesheet" type="text/css"> 6</head> 7<div class="slider"> 8 <div class="slider-inner"> 9 10 <a href="#slide-1">1</a> 11 <a href="#slide-2">2</a> 12 <a href="#slide-3">3</a> 13 <a href="#slide-4">4</a> 14 <a href="#slide-5">5</a> 15 16 <div class="slides"> 17 <div id="slide-1"> 18 <img src="img/demo-img.jpg"> 19 </div> 20 <div id="slide-2"> 21 2 22 </div> 23 <div id="slide-3"> 24 3 25 </div> 26 <div id="slide-4"> 27 4 28 </div> 29 <div id="slide-5"> 30 5 31 </div> 32 </div> 33 </div> 34</div> 35 36</html> 37

css

1* { 2 box-sizing: border-box; 3} 4 5.slider-inner { 6 width: 600px; 7 text-align: center; 8 overflow: hidden; 9} 10 11.slides { 12 display: flex; 13 14 15 overflow-x: auto; 16 scroll-snap-type: x mandatory; 17 18 19 20 scroll-behavior: smooth; 21 -webkit-overflow-scrolling: touch; 22 23 /* 24 scroll-snap-points-x: repeat(300px); 25 scroll-snap-type: mandatory; 26 */ 27} 28.slides::-webkit-scrollbar { 29 width: 10px; 30 height: 10px; 31} 32.slides::-webkit-scrollbar-thumb { 33 background: black; 34 border-radius: 10px; 35} 36.slides::-webkit-scrollbar-track { 37 background: transparent; 38} 39.slides > div { 40 scroll-snap-align: start; 41 flex-shrink: 0; 42 width: 600px; 43 height: 600px; 44 margin-right: 50px; 45 border-radius: 10px; 46 background: #eee; 47 transform-origin: center center; 48 transform: scale(1); 49 transition: transform 0.5s; 50 position: relative; 51 52 display: flex; 53 justify-content: center; 54 align-items: center; 55 font-size: 100px; 56} 57.slides > div:target { 58/* transform: scale(0.8); */ 59} 60.author-info { 61 background: rgba(0, 0, 0, 0.75); 62 color: white; 63 padding: 0.75rem; 64 text-align: center; 65 position: absolute; 66 bottom: 0; 67 left: 0; 68 width: 100%; 69 margin: 0; 70} 71.author-info a { 72 color: white; 73} 74img { 75 object-fit: cover; 76 position: absolute; 77 top: 0; 78 left: 0; 79 width: 100%; 80 height: 100%; 81} 82 83.slider-inner > a { 84 display: inline-flex; 85 width: 1.5rem; 86 height: 1.5rem; 87 background: white; 88 text-decoration: none; 89 align-items: center; 90 justify-content: center; 91 border-radius: 50%; 92 margin: 0 0 0.5rem 0; 93 position: relative; 94} 95.slider-inner > a:active { 96 top: 1px; 97} 98.slider-inner > a:focus { 99 background: #000; 100} 101 102/* Don't need button navigation */ 103@supports (scroll-snap-type) { 104 .slider-inner > a { 105 display: none; 106 } 107} 108 109.slider { 110 display: flex; 111 align-items: center; 112 justify-content: center; 113 background-image: url(img/demo-img-bg.jpg); 114}

試したこと

background-colorにしたところ色は反映したのですが、background-imageで写真にしてみると反映しないです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

画像のパス間違ってませんか?
cssファイルと同じ階層にimgフォルダがあるのでしょうか。

下記なら反映されるはずです。

├css┬demo-style.css   ├img─demo-img-bg.jpg

下記なら反映されません。

├css─demo-style.css ├img─demo-img-bg.jpg

「相対パス」について調べて確実におさえておくようにしてください。

投稿2020/04/17 11:53

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問