Home/ Questions/Q 7963019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T05:30:43+00:00

I’m a bit stuck with some of the new CSS3 Background commands an was

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0