Fluid header background image

Question

I have a problem with a header background image in a fluid page. I want to be able to see the whole image regardless of the browser width or the contents of the header. I can get the image to fill 100% of the width. However the height will always resize to fit the text content of the header (which of course it should do). What I'm trying to achieve is to have the header resize to 100% width AND retain the full height of the resized image AND retaining its aspect ratio.

Answer 1

if you keep image in the flow and virtually get it to need 0% width , you may get what you are looking for : http://codepen.io/gc-nomade/pen/qunsm

header {
  white-space:nowrap;/* make sure content keeps aside image */
}
header img {
  width:100%;
  margin-right:-100%;/* it will pull at left whats stands on right */
}
header div {
  position:relative;/* bring it up  front */
  z-index:1;/* make sure it's on top */
  display:inline-block;
  vertical-align:top;
  width:100%;
  white-space:normal;
}