css - Background Images with width 100% center to fix position -

css - Background Images with width 100% center to fix position -

first of give thanks answers time. have found lot of solutions projects through site pupil working.

i search lot before asking question couldn't find working solution.

sorry title. couldn't think improve one.

i seek develop site , have problem header. main page container has prepare size of 1024px , content within restricted 960px. header , footer takes whole wight of window.

i have 2 images: first 1 2000x250 (the buildings behind) , sec 1 2000x58 (the languages houses).let's name them img_a , img_b respectively. want both of them take whole wight of screen depending user resolution (like footer) scale responding height.

the problem want no matter screen resolution is, img_b centered within 1024px es button @ end of main page (1024px) logo center margin 0 auto; don't cover houses.

here images illustrate improve asking.

wrong (1920x1200):

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

right (1680x1050):

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

here css code:

#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; }

and html code:

<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>

thanks in advance

i don't quite understand you're trying achieve, think want seek looking @ (and adding!) background-size css (and maybe background-clip) property #header (or wherever), after define background.

note back upwards isn't there in before versions of ie, may need work around if you're going universal compatibility.

css header position background-image