해당 기능은 원래 pc쪽에서만 배경이미지가 보이고 모바일에서는 안보이도록 처리가 되어있습니다.

이 배경이미지를 모바일에서도 보여지게 처리를 할려면 css 부분을 일부 수정을 해서 처리를 하셔야 됩니다.

 

 

디자인팜을 실행 후 모바일편집을 클릭을하시고 각 텍스트+배경이미질르 클릭 하신뒤 우측에 소스 수정버튼을 클릭합니다.

 

 

그리고 위의 css 내용을 수정을 하셔야 되는데요

 

@font-face {
 font-family:'icomoon_arrow';
 src:url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.eot');
 src:url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.eot?#iefix') format('embedded-opentype'),
  url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.woff') format('woff'),
  url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.ttf') format('truetype'),
  url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.svg#icomoon_slider') format('svg');
 font-weight:normal;
 font-style:normal;
}

.img__4402*__ {box-sizing:border-box;display:block;padding:15px 15px 12px;border:1px solid #e1e1e1;background:#fff}
.img__4402*__ * {box-sizing:border-box}
.img__4402*__ img {vertical-align:top}
.img__4402*__ .title__4402*__ {display:block;margin:0 0 8px;padding:0;font-size:16px;font-weight:bold;color:#444445;line-height:1.4em;letter-spacing:-.03em}
.img__4402*__ .cont__4402*__ {display:block;font-size:13px;color:#757575;line-height:1.4em;letter-spacing:-.03em}
.img__4402*__ .link__4402*__ {
 display:inline-block;width:42px;margin-top:10px;padding:0 10px;border-radius:30px;border:1px solid #ddd;font-size:0;color:#ccc;text-align:center;vertical-align:top;
}
.img__4402*__ .link__44027__:before {content:'\e905';display:inline-block;font-family:'icomoon_arrow';font-size:20px;line-height:22px;vertical-align:top}
.img__44027__:hover .link__4402*__ {background:#ed1b23;color:#fff}

@media all and (min-width:768px){
 .img__4402*__ {padding:20px 20px 15px}
 .img__4402*__ .link__4402*__ {margin-top:15px}
}

@media all and (min-width:1024px){
 .img__4402*__ {min-height:{$farm_set[height_pc]}px;padding:30px;background:#fff url('{$farm_set[img]}') no-repeat 100% 100%}
 .img__4402*__ .title__4402*__ {margin:0 0 15px;font-size:20px}
 .img__4402*__ .cont__4402*__ {font-size:20px;line-height:1.5em}
 .img__4402*__ .link__4402*__ {width:48px;margin-top:20px}
 .img__4402*__ .link__44027__:before {font-size:22px;line-height:25px}
}

 

이게 현재 적용되어있는 css인데요 위의 빨간색 부분이 배경이미지를 출력하는 구문입니다.

이걸 pc쪽만 아닌 모든곳에 출력을 할려면 미디어쿼리 상단에 한번더 정의를 해주셔야 됩니다.

 

@font-face {
 font-family:'icomoon_arrow';
 src:url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.eot');
 src:url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.eot?#iefix') format('embedded-opentype'),
  url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.woff') format('woff'),
  url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.ttf') format('truetype'),
  url('/img_up/shop_pds/arampage/design/icomoon/icomoon_arrow/icomoon.svg#icomoon_slider') format('svg');
 font-weight:normal;
 font-style:normal;
}

.img__4402*__ {box-sizing:border-box;display:block;padding:15px 15px 12px;border:1px solid #e1e1e1;background:#fff}
.img__4402*__ {background:#fff url('{$farm_set[img]}') no-repeat 100% 100%}
.img__4402*__ * {box-sizing:border-box}
.img__4402*__ img {vertical-align:top}
.img__4402*__ .title__4402*__ {display:block;margin:0 0 8px;padding:0;font-size:16px;font-weight:bold;color:#444445;line-height:1.4em;letter-spacing:-.03em}
.img__4402*__ .cont__4402*__ {display:block;font-size:13px;color:#757575;line-height:1.4em;letter-spacing:-.03em}
.img__4402*__ .link__4402*__ {
 display:inline-block;width:42px;margin-top:10px;padding:0 10px;border-radius:30px;border:1px solid #ddd;font-size:0;color:#ccc;text-align:center;vertical-align:top;
}
.img__4402*__ .link__44027__:before {content:'\e905';display:inline-block;font-family:'icomoon_arrow';font-size:20px;line-height:22px;vertical-align:top}
.img__44027__:hover .link__4402*__ {background:#ed1b23;color:#fff}

@media all and (min-width:768px){
 .img__4402*__ {padding:20px 20px 15px}
 .img__4402*__ .link__4402*__ {margin-top:15px}
}

@media all and (min-width:1024px){
 .img__4402*__ {min-height:{$farm_set[height_pc]}px;padding:30px;background:#fff url('{$farm_set[img]}') no-repeat 100% 100%}
 .img__4402*__ .title__4402*__ {margin:0 0 15px;font-size:20px}
 .img__4402*__ .cont__4402*__ {font-size:20px;line-height:1.5em}
 .img__4402*__ .link__4402*__ {width:48px;margin-top:20px}
 .img__4402*__ .link__44027__:before {font-size:22px;line-height:25px}
}

 

파란색이 새로 추가된 소스인데요 빨간색 소스를 기준으로 min-height값과 padding값을 제외하고 나머지만 살려서 올려주시면

모바일에서도 배경이미지 확인이 가능하게 됩니다.