2

I am trying to get <div id="grid" wicket:id="grid"> to be a full screen image.

Can anyone tell me what I am doing wrong?

HTML:

<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>

</head>
<body>
<div id="grid" wicket:id="grid" >

</div>
</body>
</html>

Java:

WebMarkupContainer grid = new WebMarkupContainer("grid");
grid.add(new SimpleAttributeModifier("style", "width:100%; height:100%;background:url(partimages/" + imageName + ") no-repeat;"));
add(grid);
Rüdiger Herrmann
  • 20,512
  • 11
  • 62
  • 79
fa.
  • 63
  • 2
  • 11
  • 1
    any reason you are using java to add the styles? – Pete Apr 13 '15 at 08:50
  • I am very new to development with wicket and for this situation I gets the image name from database and it can be changed according to the parameter that the user sets on url, that is the only solution I found for wicket, thanks – fa. Apr 13 '15 at 08:57
  • 1
    ah ok, make sure `html` and `body` also have their heights set to 100% otherwise grid won't take any height. You probably should update your version of jQuery too - 1.4 is very old, we're onto v2+ now or 1.11 if you still need ie8 support – Pete Apr 13 '15 at 09:03
  • Jquery 1.4 is the project standard so cannot change it. And I just have changed the html, body height:100% but it shows a very big part of image not all image on full screen. – fa. Apr 13 '15 at 09:16
  • Also keep in mind that `Wicket` (when using ajax) also contribues `jQuery` to the headers – Rob Audenaerde Apr 16 '15 at 09:28

2 Answers2

1

Your DIV is not as high as the screen (body), and your background is limited to the size of the DIV

One solution would be to set the 100% height on HTML and BODY too, as Pete suggested in his comment.

See this question for far more detail: Make div 100% height of browser window

Community
  • 1
  • 1
Rob Audenaerde
  • 19,195
  • 10
  • 76
  • 121
0

You have tried "cover"? w3c example

background-size:cover;
Rochus
  • 33
  • 8
  • when I set just background-size:cover; it shows an empty screen if I set it with width:100%; height:100%; just sets the part of img on the full screen not set all img. @Athair – fa. Apr 13 '15 at 08:45