画像の切り替え方がわからないです。。。

初心者なので、レベルの低い質問かもしれませんが、@media でのpxで表示する画像を変えたいと試行錯誤しているのですが実現できません。。。

view portも設定しているつもりなのですが、、ここ数日調べてても解決できないです。。

また、プログラムを触った覚えはないのですが、今日の朝から昨日までうまく表示されていた画像も出なくなりました。

お力添えいただけると助かります。どうか、教えていただきたいです。

製作中のurlです。（http://pandaman1482.html.xdomain.jp/）
まだ、ファイル名なども変えれていませんので、お見苦しいかと思いますが宜しくお願い致します。

m.ts10806

2020/12/25 01:40

URLのみだと広告やスパムへの疑念が出るものなので、コードを提示してください。「全部見てください」だけだと、やはり丸投げや課題が明確になってない印象も受けます。質問内容を編集してください。

m.ts10806

2020/12/25 01:40

あと、ブラウザ開発者ツールにて、エラーも確認してください

行動規範の内容に同意します

回答2件

style.css のソースを見て確認したところ、下記の部分を修正したらどうでしょう。

css
1
2@charset "UTF-8";
3/* @media screen and (min-width: 1000px;) { 下記に修正 */
4@media screen and (min-width: 1000px) {
5
6/* 略 */
7
8  a {
9/*    text-decoraton: none; 下記に修正 */
10    text-decoration: none;
11  }
12
13/* 略 */
14
15}
16
17/* @media screen and(max-width: 1000px) { 下記に修正 */
18@media screen and (max-width: 1000px) { 
19    header {
20
21/* 略 */
22

投稿2020/12/25 02:04

hatena19

総合スコア33790

メディアクエリによって、画面幅が変わったときに背景画像を切り替えるには以下のようなスタイル指定をします。

css
1body { background-image: url("http://pandaman1482.html.xdomain.jp/img/DSCF0662.JPG"); }
2@media screen and (max-width: 1000px) {
3   body { background-image: url("http://pandaman1482.html.xdomain.jp/img/DSCF0072.JPG"); }
4}