html - Dynamic Background around a header with background -
i got pretty serious problem.
i have header background, has different ends left , right. header, content wrapper around them 1065px wide.
i created "background_wrapper" holds graphic continues on header graphic. features different ends left , right , empty space, wide header graphic. has stay right @ end of header graphic, when browser window 100% wide (on pc screen). however, if resize it, gets smaller , smaller (everytime on 100%), moves behind header.
i uploaded here: http://bf3zone.bplaced.net/coding/
my code it:
<body> <div id="background_addition"> <div id="wrapper" class="clearfix"> <div id="header"> <div id="logo"> <a href="index.html" title="m3 institut - zurück zum start"> <img src="images/logo_hover.png" alt="m3 institut - menschen machen märkte" class="b" /> <img src="images/logo.png" alt="" class="a" /> </a> </div> <ul class="nav"> <li><a href="index.html" title="start" class="current_page_item">start</a></li> <li><a href="">tab 1</a></li> <li><a href="">tab 2</a></li> <li><a href="">tab 3</a></li> <li><a href="">tab 4</a></li> <li><a href="">tab 5</a></li> <li><a href="">tab 6</a></li> <li><a href="">blog</a></li> </ul> </div>
my css stuff containing body/header/wrapper:
* { margin:0; padding:0; } html, body { display: block; background: url(images/background.jpg) repeat-x; font: normal 100% arial, sans-serif; /* 16px */ line-height: 140%; color: #464646; clear: both; } html, body, #wrapper { height: 100%; margin: 0 auto; } body > #wrapper { height: auto; min-height: 100%; } #wrapper { width: 1065px; } #background_addition { background: url(images/wrapper.png) no-repeat center top; } #header { width: 1065px; height: 193px; background: url(images/header_background.png) no-repeat top left; }
solution: adding min-width body width of header works.
html, body { min-width: 1064px; }
Comments
Post a Comment