バージョン選択

フォーラム

メニュー

オンライン状況

41 人のユーザが現在オンラインです。 (14 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 41
もっと...

サイト内検索

質問 > その他 > EC-CUBE4の背景にパターンを適用することができません

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
cusmix
投稿日時: 2022/4/27 12:19
対応状況: 解決済
新米
登録日: 2022/4/23
居住地:
投稿: 3
EC-CUBE4の背景にパターンを適用することができません
▼テンプレート
[EC-CUBE] EC-CUBEのバージョン:4.0.6-p1
新規インストール
[サーバ] Windowsでのローカル開発環境
[OS] Windows 10 Pro バージョン:21H1
[PHP] バージョン:7.4.29
XAMPP v3.3.0を使用して、EC-CUBE4をインストール
[ブラウザ] Chrome バージョン: 100.0.4896.127(Official Build) (64 ビット)
[現象]
下記のディレクトリに配置したpngを使用して、背景をリピートで設定したい。
html/template/default/assets/img\design/GraphPaper.png

cssのbodyの内容に下記のコードを追加してパターンを適用することを試みています。
body {
    background:url("../img/design/GraphPaper.png");
  background-repeat:repeat;
}


試したcssシートの箇所は3箇所です。
1箇所目は、
html/template/default/assets/css/style.css

22行目
body {
  margin: 0;
}


body {
 margin: 0;
    background:url("../img/design/GraphPaper.png");
 background-repeat:repeat;
}

に変更して試しましたが、バックグラウンドは変更されませんでした。

2箇所目は、
369行目
body {
  font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  color: #525263;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  margin: 0; }


body {
  font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  color: #525263;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  background:url("../img/design/GraphPaper.png");
  background-repeat:repeat;
  margin: 0; }

に変更して試しましたが、バックグラウンドは変更されませんでした。

3箇所目は、
html/template/default/assets/scss/style.scss
3行目
body {
  font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  color: #525263;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  margin: 0; }


body {
  font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  color: #525263;
  transition: z-index 0ms 5.28455ms;
  background: #f6f6f6;
  background:url("../img/design/GraphPaper.png");
  background-repeat:repeat;
  margin: 0; }

に変更して試しましたが、バックグラウンドは変更されませんでした。

いずれも、管理画面のキャッシュ管理でキャッシュを削除してから、画面を確認いたしました。

どのようにすると、背景画像を変更することができるでしょうか?

当方、ECサイトについても、CSSの知識についても全くの初心者でございます。質問内容がわかりづらかったり、情報が不足しているようでしたら、ご指摘いただけますとありがたいです。

yt1969
投稿日時: 2022/4/27 18:33
対応状況: −−−
常連
登録日: 2018/3/3
居住地:
投稿: 53
Re: EC-CUBE4の背景にパターンを適用することができません
body にかけてもその後上書きされちゃうので、div.ec-layoutRole にかければいいのではないかと思います。
cusmix
投稿日時: 2022/4/30 18:46
対応状況: −−−
新米
登録日: 2022/4/23
居住地:
投稿: 3
Re: EC-CUBE4の背景にパターンを適用することができません
bodyは上書きされてしまうのですね。
勉強になります。

div.ec-layoutRole が見つけられなかったのですが、.ec-layoutRole にあてたら、背景に画像が反映することができました。

お知恵をいただきありがとうございました!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン



統計情報

総メンバー数は74,626名です
総投稿数は104,054件です

投稿数ランキング

1
seasoft
7333
2
468
3217
3
AMUAMU
2712
4
nanasess
2202
5
umebius
2074
6
yuh
1664
7
red
1498
8
h_tanaka
1188
9
tsuji
942
10
fukap
907
11
shutta
835
12
tao_s
794
13 ramrun 789
14 karin 689
15 sumida 641
16
homan
633
17 DELIGHT 572
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.