バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
cusmix
投稿日時: 2022/4/27 12:19
対応状況: 解決済
半人前
登録日: 2022/4/23
居住地:
投稿: 12
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
居住地:
投稿: 91
Re: EC-CUBE4の背景にパターンを適用することができません
body にかけてもその後上書きされちゃうので、div.ec-layoutRole にかければいいのではないかと思います。
cusmix
投稿日時: 2022/4/30 18:46
対応状況: −−−
半人前
登録日: 2022/4/23
居住地:
投稿: 12
Re: EC-CUBE4の背景にパターンを適用することができません
bodyは上書きされてしまうのですね。
勉強になります。

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

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


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,288名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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