CODEWITHSUNDEEP
csshtml
Paul
Paul

Reputation: 348

css div id container fails to show background image for percent height and width

Why does the CSS div id gamecontainer not show the background image if height and width are in percent? It works in pixels, but I want it to fill different screen sizes.

<!DOCTYPE html>
<html>
<head>
<style>

body{
    height:100%;
    width:100%;
}

#gamecontainer {
  width:100%;
  height:100%;
  background:url("http://www.w3schools.com/css/img_forest.jpg");
  border: 1px solid black;
}

.gamelayer {
    width:640px;
    height:480px;
    position:absolute;
    display:none;
}
</style>
</head>
<body>
<div id="gamecontainer">
<canvas id="gamecanvas" width="100%" height="100%" class="gamelayer">           
</canvas>
</div>
</body>
</html>

Upvotes: 0

Views: 215

Answers (3)

Ahmed Alaa
Ahmed Alaa

Reputation: 124

Simply add html with 100% width and height beside the body so it should be like this:

html, body{
    height:100%;
    width:100%;
}

Upvotes: 1

Harry Cosslett
Harry Cosslett

Reputation: 131

Try using vw or vh instead of percentage. It is bases the size relative to 1% of the screen size. For example

Instead of 

body {
 height:100%;
 width:100%;
}

Try

body {
 height:100vh;
 width:100vw;
}

Here is an example of how it's used

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Upvotes: 2

mmativ
mmativ

Reputation: 1414

You can use like this, then about the question why, i cant answer that, i am not good in explanation, just add width and height to your html.

html{
  height: 100%;
  width: 100%;
}
body{
    height:100%;
    width:100%;
}

#gamecontainer {
  width:100%;
  height:100%;
  background:url("http://www.w3schools.com/css/img_forest.jpg");
  border: 1px solid black;
}

.gamelayer {
    width:640px;
    height:480px;
    position:absolute;
    display:none;
}
<div id="gamecontainer">
<canvas id="gamecanvas" width="100%" height="100%" class="gamelayer">        
</canvas>
</div>

Upvotes: 1

Related Questions