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

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

QA

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

답변 4

본문

 

 

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

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

 

 

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

 

 


as2.jpg

                                                                               [서브 페이지 입니다]

 

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

 

 

 

 

as3.jpg

 

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

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

 

 

 

 

 

as4.jpg

 

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

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

 -contain

 -auto

 등등

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

 

 

 

 

 

as1.jpg

 

 

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

 

 

 

as5.jpg

 

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

 

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

 

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

 

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

 

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

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

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

       

       메뉴소개 - imgmenu1.jpg

       매장안내 - imgmenu2.jpg

       창업안내 - imgmenu3.jpg

   소식 및 행사 - imgmenu4.jpg

                   . . .

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

 

 

 

 

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

 

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

감사합니다.

 

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

오늘도 좋은하루 되세요!

 

이 질문에 댓글 쓰기 :

답변 4

selection.page-header클래스에 height값을 이미지 높이만큼 줘보세요^^

그럼 사이즈값에 contain을 넣어주시면 될것 같네요^^

아마도 이미지가 많이 큰듯 합니다.

 

 background-size:contain;은 엘리먼트의 크기에 맞추어 최대한 배경이미지를 꽉채워줍니다^^

1.  page-header height 값에 378px이 아니라 포토샵에서 합성한 그림에 나온 배경 height 값을 주세요(원하시는 그림의 배경 높이값이요)    그리고  background-size 값을 cover으로 지정해보세요 . 이렇게 하셔서 좌우가 잘리거나 하면 비율에 맞게 배경이미지를  조정하세요 . 그리고  메뉴마다 다른 배경을 원하시면 page-header1 ~ page-header4  까지 클래스를 다르게 지정하시고  각 클래스 마다  배경이미지 이름을 다르게 주세요. 그리고 해당페이지 header 에 클래스명을 지정하시면 됩니다 

뭉개진다는 것이 어떤 의미인지는 모르겠는데 모바일 부분은 미디어 쿼리를 사용해서 적절히 조정하셔야 합니다... (아마 모바일 부분은 height 를 다른 값으로 지정하셔야 할 것이고요..)  단 몇줄의 css 추가로 모든 것이 해결될 수는 없어요.... 사용하신 css 를 보니 누군가가 만들어 놓은것을 가져다 수정하시려는 모양인데 이미 만들어진 것을 수정하는 것이 때로는 새로 만드는 것보다 어려울 때가 있습니다. 인내심을 가지고 하셔야 할 것같아요 . 모바일 부분에 질문이 있으시면 파일을 캡쳐하셔서 다시 질문하시는 것이 좋고요.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 24
© SIRSOFT
현재 페이지 제일 처음으로