안녕하세요! css를 수정해야하는 도중에 도저히 검색을해봐도, 또 비슷한 사례를 찾아봐도 

제가 많이 부족하여 질문올리게 되었습니다.

순차적으로 질문사항설명 드리겠습니다.

                                                                               [서브 페이지 입니다]

1. 빨간선으로 선택된 부분에다 배경이미지를 넣고싶어서 간단하게 배경이미지를 만들었습니다.

2. ①번 이미지의 빨간테두리가 조금 작다고 생각하여,

    더 큰 배경이미지를 적용하고자하여 1920x378 사이즈로 지정하여 만들었습니다.

3. 해당 Layout.css 파일을 드림위버로 불러와 수정할 부분을 캡쳐하였습니다. 위와같이 이미지 파일 경로를 지정해주며 수정하였습니다. css대해 공부가 한없이 부족하여 수많은 검색을 통해 최선으로 수정해보았습니다.. ㅠㅠ

 -with:100% height :100%  no-repeat; 

 -contain

 -auto

 등등

 뭐든지 다 조합해서 집어넣어 봐도 출력물이 좋지 않았습니다..ㅠㅠ

4. css 수정후 적용하니, 빨간선으로 선택부분처럼 표현이 되버리고맙니다. (이미지 해상도 맞지않고 이미지의 중앙부분만 확대되어 보이며, 이미지 전체가 보여지지 않고 일부만 구현됨)

5. 최종 목표는 위 사진처럼 만드는 것 입니다. (위 이미지는 포토샵으로 단순 합성한 이미지..)

=============================================================================================================

질문1. 배경으로 사용할 이미지를 너무 크게 제작했나요? 1920x378 로 만들었습니다.

질문2. 서브페이지 배경이미지를 넣기위해서 css 를 어떻게 수정해야 제작한 배경이미지가 위 5번의 최종목표이미지 처럼 잘 구현될 수 있을까요?

질문3. 위 제작한 이미지는 '메뉴소개' 에 해당하는 배경이미지 였습니다.

        각 메뉴별로 배경이미지를 다르게 설정하고 싶은데

        layout.css에서 [어떤 내용]을 추가해야 각각 다른 배경이미지가 지정될 수 있을까요?

       메뉴소개 - imgmenu1.jpg

       매장안내 - imgmenu2.jpg

       창업안내 - imgmenu3.jpg

   소식 및 행사 - imgmenu4.jpg

                   . . .

          이런식으로 각 메뉴별 서브페이지 배경이미지를 다르게 하고자 합니다!

바쁘실텐데 복잡한 질문을 세가지나 여쭤보게 되어 죄송합니다.. 최대한 피해드리지 않으려고 검색 많이 해봤는데 제가 부족하여 바로 적용할 수 있는 정보들을 찾지 못하여  질문드리게 되었습니다..

시간내어 읽어주셔서 감사합니다. 편하신 시간에 잠깐 시간내어 답변 작성해주시면 정말 큰 도움이 될 것 같습니다.

감사합니다.

밤낮 기온차가 큽니다! 감기 유의하시고

오늘도 좋은하루 되세요!