How to place a background image in a <div> block and behave as "responsive"

Question

I have a background-image in a block as seen in the page link below.

I am trying to display the image as follows:

• I want the image to consume more of the page background (irrespective of how much content is in the div block
• I need the image to extend outside the boundaries of the block it is in
• I want to the image to be responsive

It seems that my image grows and shrinks as I add more content or take content away. Is there anyway to get the image to appear larger than it is (ideally ~90% of viewport width) and retain its 90% size across various screen resolutions?

http://bit.ly/1IgmNKT

Thank you.

Answer 1

Try:

 background-size: 100% auto;