title: Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an <img>?
body: <p>Not a a native english speaker so there's probably a better way to shape the question...anyway:</p>
  
  <p>What I want to create is similar to the header here: <a href="http://thegreatdiscontent.com/adam-lisagor" rel="noreferrer">http://thegreatdiscontent.com/adam-lisagor</a>
  The header image is shown fully in all screensizes, and the aspect-ratio of the image is of course always correct. 
  This is made using an  and getting the text to appear on the  using position: absolute. </p>
  
  <p>But if you use css for the background-image instead of an , you'll get something like this header: <a href="http://elegantthemes.com/preview/Harmony/" rel="noreferrer">http://elegantthemes.com/preview/Harmony/</a> 
  Resize browser to see parts of the background being left out.</p>
  
  <p>Is it possible to make a a div look and behave like the first link, using the background-image css property like on the second link?
  Or do I have to change how my entire header works and use the  for the background for it to show fully in all screensizes? </p>
  
  <p>I would like to have a header background that doesn't leavy anything out, but is fixed like this <a href="http://getflywheel.com/" rel="noreferrer">http://getflywheel.com/</a>
  Only idea so far is to make a transparent png that has the correct ratio of the image, and then use background-image that has background-attachment:fixed. But this doesn't seem very smart.</p>
  
  <p>Hopefully I was clear enough that I'll get understood. Thank you all very much in advance!</p>