배경 너비가 100 % 고정 위치에있는 이미지

Question

우선 이번 모든 답변에 대해 감사드립니다. 나는 내 프로젝트에서 사이트뿐만 아니라 일하는 많은 솔루션을 발견했다.

이 질문을하기 전에 많은 검색을하지만 작동하는 해결책을 찾을 수 없습니다.

죄송합니다. 더 나은 것을 생각할 수 없었습니다.

사이트를 개발하려고하는데 헤더에 문제가 있습니다. 기본 페이지 컨테이너의 픽스 크기는 1024px이고 내부 콘텐트는 960px로 제한됩니다. 머리글과 바닥 글 만 창의 전체를 차지합니다.

두 개의 이미지가 있습니다. 첫 번째 이미지는 2000x250 (뒤의 건물)이고 두 번째 이미지는 2000x58 (집이있는 언어)입니다. 이름을 각각 img_A와 img_B로 지정하십시오. 둘 다 사용자 해상도 (바닥 글과 같은)에 따라 화면 전체를 차지하고 키 높이에 응답하기를 원합니다.

문제는 화면 해상도가 아무리 원한다고해도, img_B는 1024px의 가운데에 배치되기 때문에 ES 버튼은 메인 페이지 (1024px)의 끝 부분에 놓일 수 있으므로 여백 0의 가운데에있는 로고가 자동으로 표시됩니다. ; 집을 가리지 마십시오.

여기 몇 가지 이미지를 통해 내가 원하는 것을 더 잘 보여줍니다.

잘못된 (1920x1200의) :

http://imageshack.us/photo/my-images/577/headerwrong.jpg/

오른쪽 (화면 1680x1050가) :

#header{ 
    height: 140px; 
    width: 100%; 
    background: url(images/background_home.jpg) center center no-repeat; 
} 

#header .language_banner{ 
    background: transparent url(images/header_en.png) right bottom no-repeat; 
} 

#header .logo{ 
    display:block; 
    width:242px; 
    margin:0 auto; 
    padding-top: 63px; 
} 

와 HTML 코드 : 여기

http://imageshack.us/photo/my-images/20/headercorrect.jpg/

내 CSS 코드입니다 :

사전에

<div id="header"> 
    <div class="language_banner"> 
     <div class="logo"> 
      <img alt="athens insiders" src="<?php bloginfo("template_directory"); ?>/images/logo.png"> 
     </div> 
    </div> 
</div> 

감사

Answer 1

나는 확실히 당신이 달성하려고하는지 이해가 안 돼요,하지만 난 당신이보고 (그리고 추가!) 배경 크기의 CSS를 시도하려는 생각 (그리고 어쩌면 배경 클립) 속성을 #header (또는 어디서나)에 추가 할 수 있습니다.

이전 버전의 IE에는 지원되지 않으므로, 보편적 인 호환성을 얻으려면 다른 해결 방법이 필요할 수 있습니다.