css background 질문드립니다! 도와주세요..

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

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

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

http://fb8784.cafe24.com/bizdemo44995/img/as/as2.jpg" />

                                                                               [서브 페이지 입니다]

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

http://fb8784.cafe24.com/bizdemo44995/img/as/as3.jpg" />

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

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

http://fb8784.cafe24.com/bizdemo44995/img/as/as4.jpg" />

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

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

 -contain

 -auto

 등등

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

http://fb8784.cafe24.com/bizdemo44995/img/as/as1.jpg" />

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

http://fb8784.cafe24.com/bizdemo44995/img/as/as5.jpg" />

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

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

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

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

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

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

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

       메뉴소개 - imgmenu1.jpg

       매장안내 - imgmenu2.jpg

       창업안내 - imgmenu3.jpg

   소식 및 행사 - imgmenu4.jpg

                   . . .

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

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

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

감사합니다.

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

오늘도 좋은하루 되세요!