CSS3 background-size: contain;
background-image, css
Solution
On block elements (like `div`), height does not work the same way as width. If you don't specify a height, the element will be as high as its content. That's one thing.
`height: 100%` would be the way to go if you want your div to be as big as `body` is, but the trick is that a percentaged height always comes from the parent's height. So you have to set `height: 100%` on all the parents (including `html`) for crosss-browser results.
html,body,#please_expand { height: 100%; }
jsFiddle Demo
Problem
I'm a bit stuck with some of the new CSS3 Background commands an was wondering if anyone could advise? I'm trying to create a that has a background image that scales dynamically to the Screen/Browser Size. here's is an example of the effect I want to achieve, this is running on the < body > tag http://www.css3.info/demos/background-size-contain.html The problem I am having is that the < body > tag needs no height or width defining, but a < div > does, here is my code: ``` <!DOCTYPE html> <html> <head> <title>background-size: contain;</title> <style type="text/css"> #please_expand { background-image: url(images/betweengrassandsky.png); background-repeat: no-repeat; background-attachment: fixed; background-color: #EEE; background-size: contain; } </style> <body> <div id="please_expand"> <h1>Example J - background-size: contain;</h1> </div> </body> </html> ```