For my responsive site I want to have a hero image as a background image not an image in the html.
I can make the div be 100% width easily, but im not sure how to make it have the correct height. I have to set a height in px but the height required depends on the div's width, which varies as the site is responsive.
<p>Below is an image in the html that scales correctly</p>
<img src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" />
<p>The example below is a background image in CSS</p>
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") no-repeat;
background-size: 100% 100%;
background-size: 100% 100%; to
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
nb. Per the comment from Terry below, you may also want to add
background-position: center center; to ensure the image stays centred.