Geek asks and answers

CSS3 background-size: contain;

I got a little stuck in some of the new CSS3 Background commands that were wondering if anyone could advise?

I am trying to create a file with a background image that dynamically scales to screen / browser size.

here is an example of the effect i want to achieve, it works on the <body> tag http://www.css3.info/demos/background-size-contain.html

The problem I am facing is that body> does not require a definition of height or width, but a <div>, 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>
+3
source share
1 answer

(, div) , . , , . .

height: 100% - , , div , body, , . , height: 100% ( html) -.

html,body,#please_expand { height: 100%; }

jsFiddle Demo

+5

More articles:


All Articles